jQuery：向Ajax函数添加设置

我在每次ajax调用之前禁用一个按钮，并在调用完成后重新启用它。我是这样做的：

jQuery.fn.buttonDisable = function(v) {

    if(v)
        $(this).prop('disabled', true).addClass('animate-load').parents('html').addClass('busy');
    else
        $(this).prop('disabled', false).removeClass('animate-load').parents('html').removeClass('busy');

};


$('.element button').buttonDisable(true);

$.ajax({
    type: "post",
    dataType: "json",
    url: "/api/login",
    data: {
        username :  username.val(),
        password : password.val(),
    }
})
.done(function(data) {

    $('.element button').buttonDisable(false);

    ...

是否可以将参数传递到ajax函数中并使其自动化？比如：

$.ajax({
    button: $('.element button'),

    ...

因此，在ajax调用开始之前，将运行以下操作：

    $('.element button').prop('disabled', true).addClass('animate-load').parents('html').addClass('busy');

完成后，运行：

    $('.element button').prop('disabled', false).removeClass('animate-load').parents('html').removeClass('busy');

怎么样

$.ajaxSetup({
    beforeSend: function() {
      $('.element button').prop('disabled', true).addClass('animate-load').parents('html').addClass('busy');
    },
    complete: function() {
      $('.element button').prop('disabled', false).removeClass('animate-load').parents('html').removeClass('busy');
    }
});

---

与其扩展ajax功能，不如使用jQuery和回调：

jQuery.fn.buttonDisable = function(v) {

    if(v)
        $(this).prop('disabled', true).addClass('animate-load').parents('html').addClass('busy');
    else
        $(this).prop('disabled', false).removeClass('animate-load').parents('html').removeClass('busy');

};

$( document ).ajaxStart(function() {
  $('.element button').buttonDisable(true);
});

$( document ).ajaxComplete(function() {
  $('.element button').buttonDisable(false);
});

顺便说一句：

.parents（'html'）

可能是有史以来最糟糕的事情，首先使用

$（'html'）

，或者至少使用

.closest（'html'）

---

此方法将全局运行该函数。如果要单独控制ajax调用，请在发送前使用

和
完成
。
尝试以下操作：

    $.ajax({
        type: "post",
        dataType: "json",
        url: "/api/login",
        data: {
            username: username.val(),
            password: password.val(),
        },
        beforeSend: function () {
            $('.element button').prop('disabled', true).addClass('animate-load').parents('html').addClass('busy');
        },
        success: function () {
            $('.element button').prop('disabled', false).removeClass('animate-load').parents('html').removeClass('busy');
        },
    })

其他列出的方法（或）都可以很好地“全局”增强ajax的功能，但是我建议不要这样做对
$的每次调用都将通过这些方法传递ajax
，包括由第三方库完成的调用。这最终可能不是期望的行为

如果这适用于任何“大型”项目，我会编写自己的
$.ajax
方法，可以在我想要的任何地方使用该功能，如下所示：

(function ( $ ) {
  var root = $('html');

  function doAjax(options) {
    var jqXHR = $.ajax(options);

    if (options.disableSelection) {
      root.addClass('busy');
      options.disableSelection
        .prop('disabled', true).addClass('animate-load')

      jqXHR.always(function() {
        root.removeClass('busy');
        options.disableSelection
          .prop('disabled', false).removeClass('animate-load');
      });
    }

    return jqXHR;
  }

  window.doAjax = doAjax;
})(jQuery);

然后，您可以用
doAjax
而不是
$.ajax
替换您想要的
$.ajax
调用，并传入您的
禁用选择：$（'.element button'）

如果您选择
$.ajaxSetup
路线，您还可以通过jQuery全局事件（
.ajaxComplete
和
.ajaxStart
）中的
选项
，以及
发送前的
和
完成
作为
此
传递

还有，也许你可以看看里面的所有东西

(function ($) {
  // this value will never change, so why bother looking it up more than once
  var root = $('html'); 

  // we get to check the options of every $.ajax call, awesome!
  $.ajaxPrefilter(function(options, originalOptions, jqXHR) {

    if (options.disableSelection) {

      root.addClass('busy');
      options.disableSelection
        .prop('disabled', true).addClass('animate-load');

      jqXHR.always(function() {
        root.removeClass('busy');
        options.disableSelection
          .prop('disabled', false).removeClass('animate-load');
      });
    }

  });
})(jQuery);

// and then somewhere else when you make a call, pass disableSelection
$.ajax({
  type: "post",
  dataType: "json",
  url: "/api/login",
  // check out this method btw, it rules
  data: $('.element form').serialize(),
  disableSelection: $('.element button')
})
.done(function(data) {
  // ....
});

这两种方法都有各自的优点，尽管我倾向于选择
doAjax
方法，因为它明显地表明，这种方法有标准
jQuery.ajax
不提供的选项。如果您决定使用预过滤器，并且代码将由多人编辑/处理，我强烈建议在
disableSelection
属性中添加一个明显的名称空间，把它叫做
myCompanyDisableSelection
，这样人们就可以在代码库中搜索该字符串，而不是试图阅读jQuery文档来弄清楚
disableSelection
到底做了什么：）
不完全是你所要求的，但这也行得通：我只想编写一次禁用和启用按钮，并在我对ajax函数使用特定设置时使其工作。此外，您缺少一个
：function（）
此方法的一个问题是，如果您将其中一个选项传递给实际的
$。ajax
调用它将覆盖此处定义的行为。最好使用
$.ajaxPrefilter
添加此功能。我不想在每次ajax调用中重复使用disable/enable。是否可以通过数组附加一个设置，如我的示例代码中所示？如果已设置，请运行beforeSend/success代码？是否有更好的方法切换此用法？因为有时我在进行ajax调用时没有按钮，或者我不想禁用/启用按钮。正如我所说，在ajax调用中，使用
beforeSend
属性定义函数