Question

更新：我通过将表单提交者脚本从Header移动到jamesmsg.php页面（包含的页面）的底部来解决我的问题。这样，函数总是被重新加载并附加到＆＃34; new＆＃34;每次刷新div时形成。

这是我在提交表单时只获得一个div来刷新（而不是整个页面）的上一个问题的后续跟进。我已经删除了所有不必要的JavaScript和代码，只关注这个问题，但我仍然难倒。

当我第一次点击提交时，数据会被发布，我们会很好。当我第二次单击提交时，整个页面刷新，URL现在显示POSTed数据..好消息是数据IS插入到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>

所以你可以看到我有一个＆＃34; Control Div＆＃34;这应该永远不会改变，我的statusupdates div应该总是用提交的表单数据更新（以及随后从mysql中提取以显示最新的更新）。

jamesmsg.php（mysql凭据xxx故意为这篇文章）：

<?
$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控制台中查看此内容我完全没有错误。

Answer 1

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

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

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

所以，我要做的是让你的服务器响应以JSON或XML的形式返回数据（最好是JSON，因为它可以轻松地与JavaScript集成）。

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

Answer 2

我通过将标题中的javascript移动到包含页面底部来解决我的问题：jamesmsg.php。

我现在可以发布并进行适当的div刷新，而整个页面都不会刷新。

Ajax：First Post很棒，Second Post在URL中返回数据

2 个答案: