Question

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

这就是典型的Ajax Call对我来说的样子：

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

但我不想在每个Ajax调用中添加此按钮 - 禁用逻辑。是否有任何方法可以全局定义每次在/之后和ajax-call之间调用的函数？

Answer 1

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

对于jQuery 1.5及更高版本

在init

之后添加多个回调

自jQuery 1.5以来，由于经过大修的API和.ajax返回的新引用的jqXHR对象，您可以添加多个回调。它实现了Promise（参见Deferreds）接口，我们可以利用它来获得优势：

// 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()的注意事项：

弃用通知：jqXHR.success（），jqXHR.error（）和从jQuery 1.8开始，不推荐使用jqXHR.complete（）回调函数。准备你的代码最终删除，使用jqXHR.done（），jqXHR.fail（），和jqXHR.always（）相反。

对于jQuery 1.4及更早版本

活动和全球配置

使用.ajaxStart和.ajaxStop将回调绑定到特定选择器。触发这些回调的事件将触发所有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来完成此操作。

Answer 2

要注册全球，请使用

ajaxStart或ajaxSend次活动

与

一起

ajaxComplete或ajaxStop事件

$(".button").ajaxStart(function(){
      $(this).attr("disabled","disabled");
});


$(".button").ajaxStop(function(){
      $(this).attr("disabled","");
});

Answer 3

是的，您可以通过为每个页面调用此函数来为所有ajax调用设置默认值：http://api.jquery.com/jQuery.ajaxSetup/

此外，如果存在您不想使用默认值的ajax调用，则只需为该特定的ajax调用定义该选项。

Answer 4

您可以尝试将eventhandler绑定到submit事件，并在每次调用submit动作时调用操作。阅读它here。否则AjaxSetup是另一种做法的好方法。

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

4 个答案:

对于jQuery 1.5及更高版本

对于jQuery 1.4及更早版本