jQuery ajax 页面重新加载

Question

我们正在发出多个 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 ) {

    }); 
}

Answer 1

在这里遇到类似的问题并决定回答，尽管对于其他可能最终遇到同样问题的人来说已经很晚了。

我相信您需要的是 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”，则不会绑定(bind)“ajaxComplete”事件，而是在所有正在处理的 Ajax 请求完成时触发该事件。

我将您的原始代码复制粘贴到 fiddle 上，并添加了我刚刚推荐的部分和一些日志。 jsfiddle.net/Tt3jk/7/出于测试目的，我从第一个函数的成功事件中调用了类似的 SendData2() 函数来模拟丑陋的异步请求场景。如果您在真实环境中测试此代码(或将 SendData2 与您的 url 放在一起，该 url 响应您的数据类型“文本”，您应该在控制台上看到的是此输出。(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 上看到它(请求上有错误)。如果您使用“ajaxComplete”，则 jQuery .click() 函数中的重新加载函数会很早就被调用。但是，如果您使用“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”事件如何延迟触发，直到所有正在进行的请求完成(或至少完成但有错误)...