问题描述
我有一个带有行的表格样式页面.每行都有一个复选框.我可以选择所有/许多复选框并单击提交",然后对每一行进行 Jquery ajax 调用.
I have a table style page with rows. Each row has a checkbox. I can select all/many checkboxes and click "submit" and what is does is a Jquery ajax call for each row.
基本上我每行都有一个表单,我遍历所有选中的行并提交执行 jquery ajax 调用的表单.
Basically I have a form for each row and I iterate over all the checked rows and submit that form which does the jquery ajax call.
所以我有一个按钮:
$("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:
This form submits to 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 调用是否已完成.原因是想要在所有这些调用发生时启用/禁用提交按钮.
What I wanted to know is, from this is there a way I can tell if all my Ajax calls are complete. Reason being that want to enable/disable the submit button while all these calls are taking place.
谢谢,请注意,由于应用程序的敏感性,我不得不修改我的变量名称,因此其中很多可能会重复.
Thanks and please note that I had to mangle my variable names due to the sensitivity of the application, so many of them may be duplicated.
推荐答案
简单的方法
最简单的方法是使用 .ajaxStop()
事件处理程序:
The easy way
The easiest way is to use the .ajaxStop()
event handler:
$(document).ajaxStop(function() {
// place code to be executed on completion of last outstanding ajax call here
});
艰难的道路
您还可以手动检测是否有任何 ajax 调用仍处于活动状态:
The hard way
You can also manually detect if any ajax call is still active:
创建一个包含活动 Ajax 连接数的变量:
Create a variable containing number of active Ajax connections:
var activeAjaxConnections = 0;
就在打开新的 Ajax 连接之前增加那个变量
just before opening new Ajax connection increment that variable
$.ajax({
beforeSend: function(xhr) {
activeAjaxConnections++;
},
url (...)
在 success
部分检查该变量是否为零(如果是,则最后一个连接已完成)
in success
part check if that variable equals to zero (if so, the last connection has finished)
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
}
}
如您所见,我还添加了错误返回检查
As you can see, I've added also checking for return with error
这篇关于如何知道所有 ajax 调用何时完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!