jQuery ajax Page Reload

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全球活动. 请参阅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-是console.log from 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"事件如何被延迟触发,直到所有正在进行的请求完成(或至少完成时出错)......