jQuery的AJAX页面刷新(jQuery ajax Page Reload)

2019-07-19 01:54发布

我们正在多个Ajax请求“拯救”的数据在一个Web应用程序,然后重新加载页面。 我们碰上的情况下(因为请求异步的)或正在完成之前Ajax调用,同时重新加载页面。 简单的解决方案,这是与“异步”,使AJAX调用:虚假的选项,迫使同步调用。 这似乎工作,在运行之前的任何调用运行中的延迟执行然而对话框代码。

任何意见是极大的赞赏!

还应该指出的是,重装前把警报()允许进行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:

碰到这里寻求类似的问题,并决定回答,即使它是相当晚了谁可能在这里结束了相同问题的其他人。

我相信,你需要的是阿贾克斯的全球性事件。 见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请求完成,这将被触发。

我复制粘贴上拨弄你的原代码,增加了我只是建议使用一些日志的一部分。 jsfiddle.net/Tt3jk/7/出于测试目的,我叫了类似的SendData2()从你的第一个功能的成功事件中的功能来模拟一个丑陋的异步请求的情况。 如果测试在真实的环境中,该代码(或将您的网址,它使用的是“文本”你应该在控制台上看到这是你的输出数据类型响应的SendData2(1-从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!

您可以在事实上甚至可以看到它甚至在小提琴(与请求错误)时被调用您的装载功能。 如果您使用的jQuery。点击里面的“ajaxComplete”,重载函数()函数被调用相当早。 但是,如果你用“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”事件是如何延迟被触发,直到所有正在进行的请求完成(或至少完成但有错误)...



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

看看到完整的块



Answer 3:

这将帮助;

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

说明:从服务器加载数据,并把返回的HTML到匹配的元素。 http://api.jquery.com/load/



文章来源: jQuery ajax Page Reload