更新:我通过将表单提交者脚本从Header移动到jamesmsg.php页面(包含的页面)的底部来解决我的问题。这样,函数总是被重新加载并附加到" new"每次刷新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控制台中查看此内容我完全没有错误。
答案 0 :(得分:1)
问题在于您为AJAX调用设置的成功回调:
success: function(response) {
$("#statusupdates").html(response);
}
这最终会覆盖整个表单,并且在首次加载页面时设置的原始submit
事件处理程序将丢失。由于没有事件处理程序来阻止默认行为,因此第二个按钮单击会导致整个页面刷新。
所以,我要做的是让你的服务器响应以JSON或XML的形式返回数据(最好是JSON,因为它可以轻松地与JavaScript集成)。
现在,您的服务器响应正在返回HTML。这是你想要避免的。服务器应该为您提供数据,然后在客户端,您应该通过JavaScript动态生成HTML,以便以可读的格式显示数据。
答案 1 :(得分:0)
我通过将标题中的javascript移动到包含页面底部来解决我的问题:jamesmsg.php。
我现在可以发布并进行适当的div刷新,而整个页面都不会刷新。