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) { //Ha

Solution 1:

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.

functionhandleError(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
});

Solution 2:

We presume the server is sending JSON, and in case of a successful request we'll get something like this:

{
    success:true,
    data: {
        name:'Foo'
    }
}

... and on failure:

{
    success: false,
    error: 'Something bad happened.'
}

Then we simply filter the response with a $.Deferred:

$.get('http://localhost/api').then(function(res) {
    var filter = $.Deferred();

    if (res.success) {
        filter.resolve(res.data);
    } else {
        filter.reject(res.error);
    }

    return filter.promise();
}).done(function(data) {
    console.log('Name:',  data.name); // Outputs: Foo
}).fail(function(error) {
    console.log('Error:', error); // Outputs: Something bad happened.
})

Solution 3:

The error callback is for when the Ajax round-trip could not be completed successfully, not something based on your server logic. It would be your responsibility to check for what you consider to be a successful response inside the success callback. i.e. Add a single IF conditional that checks if the message = "There was an error." and include your error logic there, otherwise do the success logic.

An approach to do what you ask for would be to have the server return a 404 header when there is an error, then it would be handled by the error callback. The problem with this approach is that you'd be hiding if there are actual errors, and you wouldn't be able to pass additional data with it.

Solution 4:

Simplest thing to do would be to restructure like so:

function handleAjaxError function(xhr, status, error) {
    //Handle failure here
}

$.ajax({
  url: url,
  type: 'GET',
  async: true,
  dataType: 'json',
  data: data,

  success: function(data) {

     //Handle server response hereif (data.message == 'There is an error')
    {
        handleAjaxError();
        return;
    }

    //... all is good....

  },
  error: handleAjaxError
});

Solution 5:

One easy way to do this is to just use the jQuery always() function for your callback and then if you want to manually create an error just take advantage of Duck Typing!

For example:

$.get(url, {"data": data}).always(function(result)
{
    if (typeof result.status !== "undefined" && result.status !== 200) // Status code 200 represents Success/OK
    {
        //handle error
        error = "Your error was " + result.status + " " + result.statusText;
    }
    else
    {
        //success
    }
});

The error section will always be run if there was a natural header error such as a 404 Not Found. If you want to manually return an error, you can just emulate the XHR object normally passed with an error (e.g. in PHP):

publicfunctionServerSideAjaxResponse($data)
{
    if (!$data)
    {
        $response["status"] = 1001; //Make up your own error codes! Yippee! Fun!$response["statusText"] = "Error! You forgot to send the data!";
        echo json_encode($return);
        return;
    }
}