如何知道所有 ajax 调用何时完成

我有一个带行的表格样式页面。每一行都有一个复选框。我可以选择所有/多个复选框，然后单击“提交”，就可以对每一行进行 Jquery ajax 调用。

基本上，我对每一行都有一个表单，我迭代所有检查的行，并提交表单，该表单执行 jquery ajax 调用。

我有个按钮可以:

       $("input:checked").parent("form").submit();

然后每一行都有:

            <form name="MyForm<%=i%>" action="javascript:processRow(<%=i%>)" method="post" style="margin:0px;">
<input type="checkbox" name="X" value="XChecked"/>
<input type="hidden" id="XNumber<%=i%>" name="X<%=i%>" value="<%=XNumber%>"/>
<input type="hidden" id="XId<%=i%>" name="XId<%=i%>" value="<%=XNumber%>"/>
<input type="hidden" id="XAmt<%=i%>" name="XAmt<%=i%>" value="<%=XAmount%>"/>
<input type="hidden" name="X" value="rXChecked"/>
</form>

此表格提交 processRow:

   function processRow(rowNum)
{
var Amount = $('#XAmt'+rowNum).val();
var XId = $('#XId'+rowNum).val();
var XNum = $('#OrderNumber'+rowNum).val();
var queryString = "xAmt=" + "1.00" + "&xNumber=" + OrdNum + "&xId=" + xId;




$('#coda_'+rowNum).removeClass("loader");
$('#coda_'+rowNum).addClass("loading");




$.ajax({
url: "x.asp",
cache: false,
type:  "POST",
data:  queryString,
success: function(html){
$('#result_'+rowNum).empty().append(html);
$('#coda_'+rowNum).removeClass("loading");
$('#coda_'+rowNum).addClass("loader");
}
});
}

我想知道的是，有没有一种方法可以告诉我所有的 Ajax 调用是否都已完成。原因是，当所有这些调用发生时，希望启用/禁用提交按钮。

谢谢，请注意，由于应用程序的敏感性，我不得不弄乱我的变量名，所以它们中的许多可能是重复的。

93205 次浏览
小开
最佳答案

简单的方法

最简单的方法是使用 .ajaxStop()事件处理程序: 

$(document).ajaxStop(function() {
// place code to be executed on completion of last outstanding ajax call here
});

来硬的

您还可以手动检测是否有任何 ajax 调用仍处于活动状态:

创建一个包含活动 Ajax 连接数量的变量: 

var activeAjaxConnections = 0;

在打开新的 Ajax 连接之前增加该变量 

$.ajax({
beforeSend: function(xhr) {
activeAjaxConnections++;
},
url (...)

在 success部分检查该变量是否等于零(如果等于零，则最后一个连接已完成) 

success: function(html){
activeAjaxConnections--;
$('#result_'+rowNum).empty().append(html);
$('#coda_'+rowNum).removeClass("loading");
$('#coda_'+rowNum).addClass("loader");
if (0 == activeAjaxConnections) {
// this was the last Ajax connection, do the thing
}
},
error: function(xhr, errDesc, exception) {
activeAjaxConnections--;
if (0 == activeAjaxConnections) {
// this was the last Ajax connection, do the thing
}
}

正如您所看到的，我还添加了检查返回错误

小开

一个简洁的解决方案是使用;

$("body").ajaxStop(function() {
//Your code
});

有关更多信息，请查看 http://api.jquery.com/ajaxStop/上的 jQuery.ajaxStop 函数

小开

也许:

jQuery.active == 0

偷自:

Http://artsy.github.com/blog/2012/02/03/reliably-testing-asynchronous-ui-w-slash-rspec-and-capybara/

更多关于 StackOverflow 的信息:

JQuery.active 函数

小开

简单地使用 如果怎么样？

success: function(html){
if(html.success == true ){
$('#result_'+rowNum).empty().append(html);
$('#coda_'+rowNum).removeClass("loading");
$('#coda_'+rowNum).addClass("loader");


}
}

提交答案