jQuery ajax Page Reload

我们正在制作多个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放在一起响应你的数据类型是“text”,你应该在控制台上看到的是这个输出。(1-是来自SendData() console.log SendData()和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", "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”事件如何被延迟触发,直到所有正在进行的请求完成(或至少完成时出错)……

这取决于你做你的请求的方式例如(你不做表单提交。否则你需要阻止表单提交)

 $.ajax({ url: 'some_url', type: 'GET', data: 'var1=value1&var2=value2', success: function(){ //do smth }, error: function(){ alert(w.data_error); document.location.reload(); } complete: function(){ //A function to be called when the request finishes (after success and error callbacks are executed) - from jquery docs //do smth if you need document.location.reload(); } }); 

看看完整的块

这会有所帮助;

 $("body").load("default.aspx"); 

描述:从服务器加载数据并将返回的HTML放入匹配的元素中。 http://api.jquery.com/load/