gpt4 book ai didi

javascript - 为什么我的新内容没有立即在页面上显示/消失,而是在手动刷新后显示/消失?

转载 作者:行者123 更新时间:2023-11-30 19:26:02 30 4
gpt4 key购买 nike

我使用 vanilla JS 通过 AJAX 向数据库发送请求。数据写入数据库没有问题。在刷新页面之前,我看不到被放入数据库中的内容。当我删除内容时也会发生同样的情况,我必须刷新才能看到内容消失了。

我已经阅读并观看了一些说明该怎么做的教程,但我似乎没有在我的代码中找到错误。我可以单击一个按钮并即时加载“临时”代码,但是当涉及到数据库时,我无法重新创建相同的功能。

JavaScript

function postMessage(name, message){
var author = document.getElementById(name).value;
var message = document.getElementById(message).value;

var xhr = ajaxObj("POST", location.href);
xhr.onreadystatechange = function(){
if(ajaxReturn(xhr) == 'posted'){
var currentHTML = document.getElementById('comments').innerHTML;
document.getElementById('comments').innerHTML = '<div id="post_'+id+'"><p>'+author+' : '+'</p><p>'+message+'</p><button id="message_'+id+'" onclick="deleteMessage('+id+')">Delete Message</button>' + data;
document.getElementById(message).value = '';
}
}
xhr.send("action=postMessage&author="+author+"&message="+message);
}

html/php

<form class="" action="index.html" method="post">
<input type="text" name="name" id="name" value="" placeholder="Name"><br/>
<textarea name="message" id="message" rows="8" cols="80"></textarea><br/>
<button type="button" name="button" onclick="postMessage('name', 'message')">Post Message</button>
</form>
<div id="comments">
<?php
if(isset($_POST['action']) && $_POST['action'] == 'postMessage'){
$author = $_POST['author'];
$message = $_POST['message'];
$sql = "INSERT INTO comments (author, message) VALUES ('$author', '$message')";
$db_link->query($sql);
$db_link->close();
return "posted";
exit();
}
$all_posts = $db_link->query("SELECT * FROM comments");
while($post = $all_posts->fetch_assoc()){
$author = $post['author'];
$message = $post['message'];
$date = $post['entered'];
$post_id = $post['id'];
$new_post .= "<div id='post_'$post_id>
<p>$author : $date</p>
<p>$message</p>
<button id='message_$post_id' onclick='deleteMessage($post_id)'>Delete Message</button>";
}
echo $new_post;
?>
</div>

查询已在数据库上成功执行,但在我手动刷新页面之前,我没有看到带有消息的新 div。 PHP 代码或 JS 的控制台中没有记录任何错误。

最佳答案

像save.php一样新建一个提交数据的文件

并使用xhr.onload检查是否执行成功

function postMessage(name, message){
var author = document.getElementById(name).value;
var message = document.getElementById(message).value;

var xhr = ajaxObj("POST", 'save.php');

xhr.onload = function () {
var currentHTML = document.getElementById('comments').innerHTML;
document.getElementById('comments').innerHTML = '<div id="post_'+id+'"><p>'+author+' : '+'</p><p>'+message+'</p><button id="message_'+id+'" onclick="deleteMessage('+id+')">Delete Message</button>' + data;
document.getElementById(message).value = '';

};

xhr.send("save.php/action=postMessage&author="+author+"&message="+message);
}

关于javascript - 为什么我的新内容没有立即在页面上显示/消失,而是在手动刷新后显示/消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56896537/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com