Javascript Ajax post工作一次，然后再次工作，但不是异步的
我试图做的只是将论坛异步发布到一个php页面，并返回它对特定id的响应 当我第一次提交时，一切都按预期进行。文本将被发送到append.php，并在不刷新页面的情况下立即返回新的项目列表 第二次提交文本时，它似乎忽略了ajax的内容。相反，我需要append.php并只显示列表。尽管它仍然提交表单并添加到数组中。这使我怀疑我的问题在于脚本 所以我的问题是，我需要做什么才能让我的表单多次使用AJAX继续工作？ index.phpJavascript Ajax post工作一次，然后再次工作，但不是异步的,javascript,php,jquery,ajax,post,Javascript,Php,Jquery,Ajax,Post,我试图做的只是将论坛异步发布到一个php页面，并返回它对特定id的响应 当我第一次提交时，一切都按预期进行。文本将被发送到append.php，并在不刷新页面的情况下立即返回新的项目列表 第二次提交文本时，它似乎忽略了ajax的内容。相反，我需要append.php并只显示列表。尽管它仍然提交表单并添加到数组中。这使我怀疑我的问题在于脚本 所以我的问题是，我需要做什么才能让我的表单多次使用AJAX继续工作？ index.php <!DOCTYPE html> <html>
<!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>
<?
// 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>';
}
?>
用于测试Ajax
$（文档）.ready（函数（）{
//绑定到提交事件
$（“.ajax”）.submit（函数（事件）{
//获取局部变量
变量形式=$（此）；
//获取此表单的输入
var inputs=form.find（“输入、选择、按钮、文本区域”）；
//获取要发布的数据
var serializedData=form.serialize（）；
//在此期间阻止其他请求
输入。道具（“禁用”，真）；
//向窗体的ACTION属性发出请求
var请求=$.ajax({
url:form.prop（“action”），
类型：“post”，
数据：序列化数据
}).done（函数（响应、文本状态、jqXHR）{
//成功
log（“万岁，成功了！”）；
//根据窗体的NAME属性返回对ID的响应
$（“#”+form.prop（“name”））.html（响应）；
}).fail（函数（jqXHR、textStatus、errorshown）{
//失败
控制台错误(
“发生了以下错误：”+
文本状态，错误抛出
);
}).always（函数（）{
输入。道具（“禁用”，假）；
表格。解除绑定（“提交”）；
});
event.preventDefault（）；
返回false；
});
});
你在主页上。
<!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>
<?
// 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：我正在使用jQueryV2.0.2让我们看看，您在DIV中有一个表单
<div id="list">
<form class="ajax" method="POST" name="list" action="append.php">
list#list$(document).on("submit", ".ajax", function(event){
// your code here
});
您还在
总是处理程序中解除事件绑定，但这并不重要，因为在ajax调用成功后，表单不再存在了。让我们看看，在DIV中有一个表单
<div id="list">
<form class="ajax" method="POST" name="list" action="append.php">
由于表单的名称是list
，因此您实际上是在用id#list
替换DIV中的所有内容，并使用ajax调用返回的任何内容，并且您最初将事件处理程序绑定到的元素消失了
要解决此问题，请使用一个委托事件处理程序，该处理程序也可以与放入其中的新表单一起使用
$(document).on("submit", ".ajax", function(event){
// your code here
});
您还在总是处理程序中解除事件绑定，但这并不重要，因为在ajax调用成功后，表单不再存在了。让我们看看，在DIV中有一个表单
<div id="list">
<form class="ajax" method="POST" name="list" action="append.php">
由于表单的名称是list
，因此您实际上是在用id#list
替换DIV中的所有内容，并使用ajax调用返回的任何内容，并且您最初将事件处理程序绑定到的元素消失了
要解决此问题，请使用一个委托事件处理程序，该处理程序也可以与放入其中的新表单一起使用
$(document).on("submit", ".ajax", function(event){
// your code here
});
您还在总是处理程序中解除事件绑定，但这并不重要，因为在ajax调用成功后，表单不再存在了。让我们看看，在DIV中有一个表单
<div id="list">
<form class="ajax" method="POST" name="list" action="append.php">
由于表单的名称是list
，因此您实际上是在用id#list
替换DIV中的所有内容，并使用ajax调用返回的任何内容，并且您最初将事件处理程序绑定到的元素消失了
要解决此问题，请使用一个委托事件处理程序，该处理程序也可以与放入其中的新表单一起使用
$(document).on("submit", ".ajax", function(event){
// your code here
});
您还在始终处理程序中解除事件绑定，但这并不重要，因为在ajax调用成功后表单不再存在。问题在于表单。解除绑定（'submit'）它正在解除事件处理程序的绑定，以便下次不再执行 问题是form.unbind（'submit'）它正在解除事件处理程序的绑定，以便下次不再执行 问题是form.unbind（'submit'）它正在解除事件处理程序的绑定，以便下次不再执行 问题是form.unbind（'submit'）它正在解除事件处理程序的绑定，以便下次不再执行 哇，我不知道当元素消失片刻时它会解开。它现在工作得很好，谢谢你！哇，我不知道当元素消失片刻时它会解开。它现在工作得很好，谢谢你！哇，我不知道当元素消失片刻时它会解开。它现在工作得很好，谢谢你！哇，我不知道当e