jquery - 如何在每次 ajax 调用之前和之后触发某些操作

Question

我正在使用 jQuery 和 jQuery UI。我经历过，用户有时会多次触发 ajax 调用，因为触发调用的按钮/链接在单击后并未立即禁用。为了防止这种情况发生，我现在禁用“beforeSend”操作中的按钮/链接。

这对我来说是典型的 Ajax 调用:

   $.ajax({
      type: "POST",
      url: "someURL"
      data: "someDataString",
      beforeSend: function(msg){
        $(".button").button("disable");
      },
      success: function(msg){
        $(".button").button("enable");
        // some user Feedback
      }
    });

但我不想添加这个按钮 - 在每个 Ajax 调用中禁用逻辑。有没有办法全局定义一个每次在 ajax 调用之前/之后调用的函数？

Answer 1

有多种方法可以实现您的要求。它们之间的唯一区别在于它们的实现方式，您可以选择最适合您的具体情况的方法。这些方法还取决于您使用的 jQuery 版本，因此我将这个答案分为两部分。

适用于 jQuery 1.5 及更高版本

在init之后添加多个回调

自 jQuery 1.5 起，借助彻底修改的 API 和新引入的 jqXHR，您可以添加多个回调由 .ajax 返回的对象。它实现了 Promise(参见 Deferreds )接口(interface)，我们可以利用它来发挥我们的优势:

// fn to handle button-toggling
var toggleButton = function() {
    var button = $(".button");
    button.button(button.button("option", "disabled") ? "enable" : "disable");
}

// store returned jqXHR object in a var so we can reference to it
var req = $.ajax({
    beforeSend: toggleButton,
    success: function(msg){
        /* Do what you want */
    }
}).success(toggleButton);

// we can add even more callbacks
req.success(function(){ ... });

使用前置过滤器

jQuery 1.5还推出了prefilters您可以使用它来替换 jQuery 1.4 的全局配置:

// good practice: don't repeat yourself, especially selectors
var button = $(".button");

$.ajaxPrefilter(function(options, _, jqXHR) {
    button.button("disable");
    jqXHR.complete(function() {
        button.button("enable");
    });
});

注意:jqXHR section of the $.ajax entry有关于使用 jqXHR.success() 的通知:

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

适用于 jQuery 1.4 及更早版本

事件和全局配置

使用.ajaxStart和 .ajaxStop将回调绑定(bind)到特定选择器。触发这些回调的事件将在所有 Ajax 请求上触发。

$(".button").ajaxStart(function(){
    $(this).button("disable");
}).ajaxStop(function(){
    $(this).button("enable");
});

使用.ajaxSetup设置全局 ajax 配置。传递给 .ajaxSetup 的设置对象将应用于所有 Ajax 请求，甚至是由简写 .get、.getJSON 和 发出的请求>.post。请注意，不建议这样做，因为它很容易破坏其功能。

$.ajaxSetup({
    beforeSend: function(){
        $(".button").button("disable");
    },
    success: function(){
        $(".button").button("enable");
    }
});

过滤掉全局事件回调中的请求

如果您需要过滤掉某些请求，您可以使用 .ajaxSend 来实现。和 .ajaxComplete您可以在其中检查 Ajax settings 对象。像这样的事情:

var button = $(".button");

// fn to handle filtering and button-toggling
var toggleButton = function(settings) {
    if (settings.url == "/specific/url")
        button.button(button.button("option", "disabled") ?
            "enable" : "disable");
    }
};

// bind handlers to the callbacks
button.ajaxSend(function(e,x,settings){
    toggleButton(settings);
}).ajaxComplete(function(e,x,settings){
    toggleButton(settings);
});

这也可以通过前面提到的 .ajaxSetup 来完成，方法是对传递给回调处理程序的 settings 对象进行相同类型的检查。