Leem Leem - 3 months ago 52
Javascript Question

How to trigger jquery.ajax() error callback based on server response, not HTTP 500?

By using jquery ajax function, I can do something like:

$.ajax({

url: url,
type: 'GET',
async: true,
dataType: 'json',
data: data,

success: function(data) {

//Handle server response here

},

error: function(xhr, status, error){

//Handle failure here

}

});


I got two questions to ask based on above code:


  1. When will the jquery.ajax()
    error
    callback be called??

  2. What if server response to me a json object with string message "There is an error". Which means the request is still send successfully, but I got server response
    {message: "There is an error"}
    .



I think no matter what string value server is responsed, if client got server's response, the jquery.ajax()
success
callback will be triggered anyway.

I'd like to ask if server specifically returns to me a JSON object with string value like
{message: 'There is an error'}
, could server do something so that this response could be handled in jquery.ajax()
error
callback instead of
success
callback?

Answer

The error callback will be executed when the response from the server is not going to be what you were expecting. So for example in this situations it:

  • HTTP 404/500 or any other HTTP error message has been received
  • data of incorrect type was received (i.e. you have expected JSON, you have received something else).

In your situation the data is correct (it's a JSON message). If you want to manually trigger the error callback based on the value of the received data you can do so quite simple. Just change the anonymous callback for error to named function.

function handleError(xhr, status, error){

    //Handle failure here

 }

$.ajax({

  url: url,
  type: 'GET',
  async: true,
  dataType: 'json',
  data: data,

 success: function(data) {
     if (whatever) {
         handleError(xhr, status, ''); // manually trigger callback
     }
     //Handle server response here

  },

 error: handleError
});