如何在jQuery中向ajaxSetup（）添加回调

Question

我有一个Bootstrap按钮，单击该按钮会显示“正在加载”。 AJAX请求完成后，按钮将重置为其正常状态。 可以使用以下代码正常工作：

function doThis() {

    var btn = $(this);
    btn.button('loading');

    $.ajax({
        ...
        success: function(data) {
            if(data!=null && data.status==='success') {
                btn.button('reset');
            }
            else {
                btn.button('reset');
            }
        }
        error: function(jqXHR, textStatus, errorThrown) {
            btn.button('reset');
        }
    });
};

当我将部分错误处理移出该函数时（因为我不想为每个$.ajax调用重复进行错误处理）， btn超出范围，无法重置。

$.ajaxSetup({
    error:function(jqXHR, textStatus, errorThrown) {
        ...//lot of other code
        btn.button('reset');//doesn't work
    }
})

如何为ajaxSetup()提供回调？

Answer 1

您希望在成功/失败的情况下重置按钮，因此请使用.always（）处理程序

function doThis() {

    var btn = $(this);
    btn.button('loading');

    $.ajax({
        //...
        success: function (data) {
            if (data != null && data.status === 'success') {
                //do stuff in case of success
            }
        }
    }).always(function () {
        btn.button('reset');
    });
};

同样对于全局ajax错误处理，请使用http://api.jquery.com/ajaxerror/，而不要使用ajaxSetup设置error处理程序

Answer 2

尝试将$.ajaxSetup() context设置为btn （已定义的元素，对象）

$.ajaxSetup({
  context: btn || $("button"), // set `this` within `success` , `error`
  error: function(jqXHR, textStatus, errorThrown) {
        // `this` : `btn || $("button")`
        // do stuff with `this`
        this.button('reset');
    }
})

Answer 3

如果您的btn始终相同，请尝试在doThis函数之外声明它：

var btn = $('#btnId'); // declare variables outside

$.ajaxSetup({
  error: function(jqXHR, textStatus, errorThrown) {
    btn.button('reset');
  }
});

function doThis() {
  $.ajax(...);
}

如果每个doThis调用的btn可以不同，则应使用生成器函数：

function generateErrorHandler(btn) {
  return function() {
    btn.button('reset');
  };
}

function doThis() {
  var btn = $(this);
  $.ajax({
    ...
    error: generateHandler(btn)
  });
}