我们正在发出多个ajax请求,以“保存” Web应用程序中的数据,然后重新加载页面。我们遇到了这样一种情况:(由于请求是异步发出的)在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全球活动。 请参阅API文档
特别是在这里
全球活动 这些事件在文档上触发,调用可能正在侦听的所有处理程序。您可以像这样监听这些事件:
全球活动
这些事件在文档上触发,调用可能正在侦听的所有处理程序。您可以像这样监听这些事件:
$(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一起使用,以响应您的数据类型为“文本”的数据类型,那么您将在控制台上看到的是此输出。(1-是console.log来自SendData(),2-来自SendData2()):
SendData2()
SendData()
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”事件时调用重载函数,则在所有请求完成后将调用重载函数。
我不知道小提琴是否会在一段时间后消失,所以我也会在没有控制台日志的情况下发布在这里所做的更改:
$(".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", "type": "POST", "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", "type": "POST", "data": "temp", "url": "your url here!", "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”事件如何延迟触发,直到所有正在进行的请求完成(或至少完成并发生错误)为止…