在ajax成功或失败之前调用一个函数

Question

I am using $.ajax to make a post request. Then, I am trying to call a function before success or failure of the ajax request. Right now my approach is like following

var someCallback = function() {
     //do something
};
var Success = false;
$.ajax({
    type: "POST",
    url: "/some/service",
    dataType: "text",
    data: JSON.stringify(someData),
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        someCallBack(); //<--- this is the function
        Success = true;//doesnt goes here
    },
    error: function (textStatus, errorThrown) {
        someCallBack();
        Success = false;//doesnt goes here
    }

});

The thing is, i need to run someCallBack() after the ajax request completes irrespective of whether it succeeds or fails but before success or error callback is called. I dont want to use ajaxStart and ajaxStop in this scenario. I looked at 'complete' callback, but it is only called after error or success. I don't want to call the someCallBack() at two places. Any Suggestions, Please.

Answer 1

AJAX supports beforeSend

$.ajax({
  url: "http://example.com",
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
}).always(function() {
   callback();
});

I misread your question. I sounds like you need .always() ?

Answer 2

I think you're looking for ajax' deferred interface, which has an always method . And you can chain your success/error handlers after that - though you cannot use those that go into the options object.

$.ajax({
    type: "POST",
    url: "/some/service",
    dataType: "text",
    data: JSON.stringify(someData),
    contentType: "application/json; charset=utf-8"
})
.always(someCallBack)
.done(function (data) {
    var Success = true; // goes here after someCallBack()
})
.fail(function (textStatus, errorThrown) {
    var Success = false; // goes here after someCallBack()
});

Answer 3

$.ajax returns a $.Deferred (more specifically, a jqXHR ), which you can use to define your callbacks. In your case, the advantage to this over defining callbacks within the ajax setting object is that your callbacks will be executed in the order that they are defined:

( $.Deferred() behaves just like your $.ajax(settings) call)

Success:

$.Deferred()
  .always(function() { console.log('always'); })
  .done(function() { console.log('done'); })
  .fail(function() { console.log('fail'); })
  .resolve();
// "always"
// "done"

Failure:

$.Deferred()
  .always(function() { console.log('always'); })
  .done(function() { console.log('done'); })
  .fail(function() { console.log('fail'); })
  .reject();
// "always"
// "fail"

Likewise, if .always is defined last, it will execute last:

$.Deferred()
  .done(function() { console.log('done'); })
  .fail(function() { console.log('fail'); })
  .always(function() { console.log('always'); })
  .resolve();
// "done"
// "always"

Answer 4

You just need to bind 2 ajax events: ajaxSend and ajaxComplete . For example

$(document).bind("ajaxSend", function(){
    $("#loading").show();
}).bind("ajaxComplete", function(){
    $("#loading").hide();
});