Ajax:第一个Post很棒，第二个Post返回URL中的数据

Ajax: First Post great, Second Post returns Data in URL

本文关键字：Post URL 数据 返回 第一个 很棒 Ajax 第二个      更新时间：2023-09-26

更新:我通过将我的表单提交器脚本从Header移动到jamesmsg.php页面(包含的一个)的底部来解决我的问题。这样，每次刷新div时，函数总是被重新加载并附加到"new"表单。

这是我之前关于提交表单时只刷新一个div(而不是整个页面)的问题的后续问题。我已经剥离了所有不必要的javascript和代码，只专注于这个问题，但我仍然难住了。

当我第一次点击提交时，数据就发布了，我们就好了。当我第二次单击submit时，整个页面刷新，URL现在显示了张贴的数据。好消息是数据是插入到mysql数据库，我只需要得到这个表单的行为正确，就像它做的第一次点击(至少它似乎这样做)。

我的主php文件是james.php:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

</head>
<body>
<div id='mainpage'>
    <div id='control'>CONTROL DIV 1 ... 2 ... 3</div>
    <div id='statusupdates'><? include 'jamesmsg.php'; ?></div>
</div>
</body>
</html>

所以你可以看到我有一个"Control Div"，它应该永远不会改变，我的statusupdates Div应该总是更新与提交的表单数据(并随后从mysql拉显示最新的更新)。

jamesmsg.php (mysql credentials XXX for this post):

<?
$xxx = new mysqli("xxx","xxx","xxx",xxx);
$MsgText = $_POST["MsgText"];
if ($MsgText != "") {
    $query = "INSERT INTO Messages SET
                MsgDate = NOW(),
                MsgAuthor = 0,
                MsgText = '" . mysqli_real_escape_string(xxx,$MsgText) . "'";
    if (!xxx->query($query)) {
        print "error! xxxx->error<BR>query = $query<BR>";
    }
}
print "<form id='"statusform'" action='"james.php?L=1'">
        <textarea name=MsgText rows=5 cols=40></textarea><BR>
        <input type=submit value=Post id=uhsbutton>
        </form>";
?>
<? 
print "<BR><BR><pre>POST Variables:<BR>";
print_r ($_POST);
print_r ($_GET);
print "</pre>";
?>
<?
$query = "SELECT * FROM Messages ORDER BY MsgDate DESC LIMIT 5";
$msgq = $xxx->query($query);
if ($msgq->num_rows > 0) {
    while ($r = $msgq->fetch_array()) {
        print ".......<BR>";
        print "msg ID: " . $r["ID"] . " - " . $r["MsgDate"] . " " . $r["MsgAuthor"] . "<BR>";
        print $r["MsgText"] . "<BR>";
    }
}
else {
    print "no messages";
}
?>
<script>
    /*************************************
     * form submitter
     **************************************/
$(document).ready(function() {
    $("#statusform").submit(function(e) {
        e.preventDefault();
        var data=$(this).serialize();
        var pUrl="jamesmsg.php";
        submitFormSave(data, pUrl);
    });
    function submitFormSave(data, pUrl) {
        $.ajax({
            url: pUrl,
            type: 'POST',
            cache: false,
            data: data,
            success: function(response) {
                $("#statusupdates").html(response);
            }
        }).success(function(){
        });
    }
});
</script>

你可以通过执行命令:demo

看到它的实际效果

在Chrome的控制台查看这个，我没有得到任何错误。

问题在于您为AJAX调用设置的成功回调:

success: function(response) {
    $("#statusupdates").html(response);
}

这最终会覆盖整个表单，并且在页面第一次加载时设置的原始submit事件处理程序丢失。由于没有提供事件处理程序来防止默认行为，因此单击第二个按钮将刷新整个页面。

所以，我要做的是让你的服务器响应以JSON或XML的形式返回数据(最好是JSON，因为它很容易与JavaScript集成)。

现在，您的服务器响应返回HTML。这是你要避免的。服务器应该为您提供数据，然后在客户端，您应该通过JavaScript动态生成HTML，以可读格式显示数据。

我通过将javascript从Header移动到包含页面的底部来解决我的问题:jamesmsg.php.

我现在可以发布并有适当的div刷新，而不需要整个页面总是刷新

相关文章：