我有一个非常基本的聊天页面。chat.php基本上有一个文本区域,用户键入一些东西,点击回车,然后提交表单,ajax表单将chat_window.php加载到#refreshdiv中。第一次提交后,第二次提交由于某种原因是提交两次,然后第三次提交3x。。等等。我还有一个间隔,每隔5秒用chat_window.php重新加载一个div。
chat.php
<div class="container">
<?PHP
echo "<form id='chat_form' method='post' action='processforms/process_chat.php'>";
echo "<input type='hidden' name='chat_form_submit'>";
echo "<textarea name='msg' style='width:98%;padding:4px;' id='msg_field'></textarea>";
echo "</form>";
echo "<div id='refresh'></div>"; //REFRESH WINDOW (chat_window.php)
?>
</div><!-- END CONTAINER -->
chat_window.php
<?PHP
include ("../includes/mysql.php");
$q = mysql_query("SELECT * FROM chat ORDER BY timestamp DESC");
while ($row = mysql_fetch_assoc($q)) {
echo $row['msg']."<br>";
}
?>
Javascript
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {// REFRESH INTERVAL
interval = setTimeout(refreshpage, 5000);
function refreshpage() {
$('#refresh').load('includes/chat_window.php?timer='+new Date().getTime(), function () {
interval = setTimeout(refreshpage, 5000);
});
}
});
</script>
<script type="text/javascript"> //CHAT FORM
$(document).ready(function() {
var options = {
target: '',
dataType: 'html',
beforeSubmit: showRequest_chatform,
success: showResponse_chatform
};
$(".container").delegate("#chat_form","submit",function () {
$(this).ajaxSubmit(options); //submit the form
return false;
});
});
function showRequest_chatform(formData, jqForm, options) {
return true;
}
function showResponse_chatform(responseText, statusText, xhr, $form){
$('#refresh').load('includes/chat_window.php', function () {
$('#msg_field').val("").focus();
});
}
</script>
您能替换此行吗:echo "<form id='chat_form' method='post' action='processforms/process_chat.php'>";
带此行:echo "<form id='chat_form' method='post' action='processforms/process_chat.php' onsubmit='return false;'>";
告诉我它是如何为你工作的?