我们遇到了一种情况：(因为请求是异步的),在ajax调用完成时或之前重新加载页面.对此的简单解决方案是使用“async”：false选项进行ajax调用,强制进行同步调用.这似乎有效,但是在任何调用执行延迟运行之前运行的对话框代码.
任何意见是极大的赞赏！
还应该注意的是,在重新加载之前放置一个alert()允许进行ajax请求. (警报显然会延迟重新加载,以便成功通过请求)
更新代码示例：
$(".submit_button").click(function(){
popupMessage();
sendData(); //the ajax calls are all in here
location.reload();
});
function sendData() {
//a bunch of these:
$.ajax({
"dataType": "text","type": "POST","data": data,"url": url,"success": function (msg) {}
}).done(function( msg ) {
});
}
解决方法
我相信你需要的是Ajax全球活动.
See API Documentation
特别是在这里
Global Events
These events are triggered on the document,calling any handlers which
may be listening. You can listen for these events like so:
$(document).bind("ajaxSend",function(){
// You should use "**ajaxStop**" instead of "ajaxComplete" if there are more
// ongoing requests which are not completed yet
}).bind("ajaxStop",function(){
// call your reload function here
});
现在针对您的情况,如果您使用“ajaxStop”,而不是绑定“ajaxComplete”事件,则在处理完所有Ajax请求时将触发此事件.
我将原始代码复制粘贴在小提琴上,并添加了我刚推荐的部分日志. jsfiddle.net/Tt3jk/7/为了测试目的,我在第一个函数的成功事件中调用了一个类似的SendData2()函数来模拟一个丑陋的异步请求场景.如果您在真实环境中测试此代码(或将SendData2与您的url放在一起响应您的数据类型是“text”,您应该在控制台上看到的是此输出.
(1-是来自SendData()的console.log,2-来自SendData2())：
1-sending... waiting for all requests to complete... 1-success:! 2-sending... waiting for all requests to complete... 1-done: 2-success:! 2-done: completed now!
事实上,甚至在调用重载函数时,甚至可以在小提琴上看到它(在请求上有错误).如果你使用“ajaxComplete”,你的jQuery .click()函数内的重载函数很早就被调用了.但是,如果在触发“ajaxStop”事件时使用“ajaxStop”并调用reload函数,则在完成所有请求后将调用reload函数.
我不知道小提琴是否会在一段时间后消失,所以我会在没有控制台日志的情况下发布我在这里所做的更改：
$(".submit_button").click(function () {
popupMessage();
sendData(); //the ajax calls are all in here
// consider reloading somewhere else
});
$(document).bind("ajaxSend",function () {
console.log("waiting for all requests to complete...");
// ajaxStop (Global Event)
// This global event is triggered if there are no more Ajax requests being processed.
}).bind("ajaxStop",function () {
// maybe reload here?
location.reload();
});
function popupMessage() {
alert("Pop!");
}
function sendData() {
//a bunch of these:
$.ajax({
"dataType": "text","data": "temp","url": "your url here!","beforeSend": function (msg) {
console.log("1-sending...");
},"success": function (msg) {
console.log("1-success!");
sendData2(); // again
},"error": function (msg) {
console.log("1-error!");
}
}).done(function (msg) {
console.log("1-done!");
});
}
function sendData2() {
//a bunch of these:
$.ajax({
"dataType": "text","beforeSend": function (msg) {
console.log("2-sending...");
},"success": function (msg) {
console.log("2-success!");
},"error": function (msg) {
console.log("2-error!");
}
}).done(function (msg) {
console.log("2-done!");
});
}
PS.不确定在请求中发出另一个请求是否是一个好习惯,可能不是.但我把它放在那里,以显示“ajaxStop”事件如何被延迟触发,直到所有正在进行的请求完成(或至少完成时出错)……
