我想做的只是将论坛异步发布到 php 页面，并将其回显的内容返回到特定的 id。
当我第一次提交时，一切都按预期进行。文本被发送到append.php并立即返回新的项目列表，而无需刷新页面。
我第二次提交文本时，似乎忽略了 ajax 内容。相反，它需要我附加.php 并仅显示列表。尽管它仍然提交表单并添加到数组中。这让我怀疑我的问题出在脚本中。
所以我的问题是，我需要做什么才能让我的表单连续多次使用 AJAX 工作？
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>For Testing Ajax</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
// Bind to the submit event
$(".ajax").submit(function(event){
// Get local variables
var form = $(this);
// Get inputs of this form
var inputs = form.find("input, select, button, textarea");
// Get the data to post
var serializedData = form.serialize();
// prevent additional requests during the duration of this one
inputs.prop("disabled", true);
// Make the request to the form's ACTION property
var request = $.ajax({
url: form.prop("action"),
type: "post",
data: serializedData
}).done(function (response, textStatus, jqXHR){
// Success
console.log("Hooray, it worked!");
// Return response to the ID according to the form's NAME property
$("#"+form.prop("name")).html(response);
}).fail(function (jqXHR, textStatus, errorThrown){
// Failure
console.error(
"The following error occured: "+
textStatus, errorThrown
);
}).always(function () {
inputs.prop("disabled", false);
form.unbind('submit');
});
event.preventDefault();
return false;
});
});
</script>
</head>
<body>
<h1>You're on the main page.</h1>
<div id="list">
<form class="ajax" method="POST" name="list" action="append.php">
<input type="text" name="text">
<input type="submit" value="Append">
</form>
<?
$list = json_decode(file_get_contents('list.json'),true);
echo '<ul>';
foreach($list as $item){
echo '<li>'.$item.'</li>';
}
echo '</ul>';
?>
</div>
</body>
</html>
append.php
<?
// Get the POST stuff
$text = $_POST['text'];
Check if anything was indeed submitted
if (isset($_POST['text'])) {
// Get current array
$list = json_decode(file_get_contents('list.json'),true);
// Add to the array
$list[] = $text;
// Save changes to the file
file_put_contents('list.json',json_encode($list));
// Return the forum and the array in an unorganized list
echo '
<form class="ajax" method="POST" name="list" action="append.php">
<input type="text" name="text">
<input type="submit" value="Append">
</form>
<ul>';
foreach($list as $item){
echo '<li>'.$item.'</li>';
}
echo '</ul>';
}
?>
感谢您的宝贵时间!
PS:我使用的是 jQuery v2.0.2
最佳答案
问题是 form.unbind('submit'); 它正在解除绑定(bind)您的事件处理程序，因此下次不会执行。
关于javascript - Ajax post 工作一次然后再次工作但不是异步的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22287774/