jQuery Ajax页面重新加载

Question

我们正在进行多个ajax请求来“保存”Web应用程序中的数据，然后重新加载页面。我们遇到了这样一种情况：由于请求是异步进行的，因此在或之前页面重新加载，而ajax调用尚未完成。简单的解决方法是使用“async”:false选项进行ajax调用，强制同步调用。这似乎是有效的，但在任何调用执行之前运行的对话框框代码会延迟运行。

非常感谢您提供的任何建议！

另外需要注意的是，在重新加载之前放置一个alert()可以允许ajax请求的执行。（显然，alert延迟了重新加载足够长的时间，以便成功执行请求）

附带代码示例进行更新：

$(".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 ) {

    }); 
}

- btginz

---

请问您能否提供一段代码示例。 - ROY Finley

如果您正在保存数据并刷新依赖于该数据可用性的页面，为什么不直接POST数据而不进行ajax操作... - keithhatfield

数据并不会简单地被发布，因为页面上存在多个不同的复杂表单，包括图像数据。 - btginz

Answer 1

在追寻类似问题时遇到了这里，决定回答即使对于那些可能因为同样的问题而来到这里的人来说已经很晚了。

我认为你需要的是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

     });

现在针对您的情况，不要绑定"ajaxComplete"事件，而是使用"ajaxStop"，当所有正在处理的Ajax请求完成时，将会触发此事件。

我复制并粘贴了您原始的代码到fiddle，并添加了我刚刚推荐的部分以及一些日志。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!

您实际上甚至可以在fiddle上看到它（请求中的错误），当您的reload函数被调用时。如果使用"ajaxComplete"，则jQuery .click()函数内部的reload函数会被相当早地调用。但是，如果使用"ajaxStop"并在触发"ajaxStop"事件时调用reload函数，则reload函数将在所有请求完成后被调用。

我不知道fiddle是否会在一段时间后消失，因此我也会在这里发布我所做的更改，而没有控制台日志：

$(".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”事件延迟触发直到所有正在进行的请求完成（或至少已完成错误处理）...

- Kerem

Answer 2

这取决于您发起请求的方式。例如（如果您不使用表单提交，则需要防止表单提交）。

$.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(); 
 }
});

看完整块的内容

- Jarek

---

谢谢您的回复！我已经尝试使用“承诺”（promises）如上所述的“完成”和“完成后”回调函数，但是代码块从未执行或被重新加载截断。 - btginz

你如何处理你的请求？ - Jarek

就像上面的示例一样。 - btginz

将字符串 location.reload(); 移动到 Ajax 的完整部分中，并在单击按钮处理程序中添加字符串：return false; （它将防止页面重新加载） - Jarek

将reload方法放在ajax调用的complete函数回调中，第一次调用时会重新加载页面吗？ - btginz

Answer 3

这会有所帮助；

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

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

- Teoman shipahi

Answer 4

我在这里没有看到提到，所以我会补充一下：

如果您使用document.location.reload()进行ajax调用时，发现内容似乎没有刷新，请将true作为参数添加到reload函数中-这将告诉它不要使用页面的缓存版本，而是强制向服务器发出新的请求。

因此，重新加载页面的脚本应该像这样：

document.location.reload(true);

- dougczar