检测到 jquery 的 ajax 请求

Question

我正在使用 asp 控件，我有一些下拉列表，可以选择返回服务器并执行一些操作（通过 asp ajax）我正在寻找的是通过 jquery 检测 ajax 调用何时开始我尝试了以下调用：

  $.ajaxSetup({
                    beforeSend: function (jqXHR, settings) {
                        alert("ok");
                        return false;
                    }
                });

和

also  $(document).ajaxStart(function () {
                   alert("OK");
                });

但是 none 这行得通

Answer 1

您可以通过这种方式在 ajax 请求中显示您的 loader / waiting image。

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
});

如果你想像 ajaxStart 和 ajaxStop 那样绑定 global events。

$("#loading").bind("ajaxStart", function(){
    $(this).show();
}).bind("ajaxStop", function(){
    $(this).hide();
});

Answer 2

确实不推荐，但您可以使用.ajaxStart() and .ajaxComplete()处理程序：

$(document).ajaxStart(function() {
    console.log('Ajax call started');
    $("#loading").show();
});
$(document).ajaxComplete(function() {
    console.log('Ajax call completed');
    $("#loading").hide();
});

Important note Starting with jQuery 1.9, all the handlers for the jQuery global Ajax events must be attached to document.

请记住，如果您的 ajax 调用包含 global: false，请求将忽略调用默认全局配置（这也意味着 .ajaxStart() 和 .ajaxComplete()不会调用回调。

如果您不想设置全局回调，您可以将它们专门设置为您进行的 ajax 调用：

$.ajax({
    method: "GET", // or POST
    url: "path",
    ....
    beforeSend: function() {
        console.log('Ajax call started');
        $("#loading").show();
    },
    complete: function() {
        console.log('Ajax call completed');
        $("#loading").hide();
    }
});

Answer 3

好吧，如果 $(document).ajaxStart(function() {}); 不适合你，尝试一点原始 js，

var oldXHR = window.XMLHttpRequest;

function newXHR() {
    var realXHR = new oldXHR();
    realXHR.addEventListener("readystatechange", function() {
        if(realXHR.readyState==1){
            alert('server connection established');
        }
        if(realXHR.readyState==2){
            alert('request received');
        }
        if(realXHR.readyState==3){
            alert('processing request');
        }
        if(realXHR.readyState==4){
            alert('request finished and response is ready');
        }
    }, false);
    return realXHR;
}
window.XMLHttpRequest = newXHR;

它应该为您提供 ajax 请求的所有状态，并检查哪个状态适合您，然后您可以删除其余的 if 条件。你可以把它放在 $(document).ready(function(){});

之外

检测到 jquery 的 ajax 请求

detect ajax request by jquery

ajax

jquery

asp.net-ajax