How do you handle errors from AJAX calls?

Question

Let\'s say I have the following jQuery AJAX call:

$.ajax({
   type: \"POST\",
   url: \"MyUrl\",
   data: \"val1=test\",
   success: function(result){
               


        

Answer 1

Doesn't the jQuery ajax function accept one more parameter at the end, a callback for failed calls? If so, just add a fail:function(...){..} after the success callback.

Answer 2

$.ajax({
   type: "POST",
   url: "MyUrl",
   data: "val1=test",
   success: function(result){
        // Do stuff
   },
   error: function(request,status,errorThrown) {
        // There's been an error, do something with it!
        // Only use status and errorThrown.
        // Chances are request will not have anything in it.
   }
 });

Answer 3

It's pretty late to answer this question but I think It will be beneficial to some one using es6 and jquery 2.2.

I generally follow this (deferred approach) in my code

sendAjaxRequest(URL, dataToSend) {
    return $.ajax({
        type        : 'POST',
        url         : URL,
        data        : JSON.stringify(dataToSend),
        dataType    : 'json'
    }).fail((responseData) => {
        if (responseData.responseCode) {
            console.error(responseData.responseCode);
        }
    });
},

I have attached a deferred fail method which will be called if some error occurs. It is an alternative construct to the error callback option, the .fail() method replaces the deprecated .error() method in latest jquery.

Next from the place of calling sendAjaxRequest I use then jquery promise callback

sendAjaxRequest(URL, dataToSend)
.then(
     (success) => {
     },
     (error) => {
     }
);

It will call success or error function based on the response received from server.

Answer 4

Personally, I have similar code to the following code in my library.

$.ajaxSetup({
    error: function(xhr){
        alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
    }
});

jQuery docs Ajax/jQuery.ajaxSetup

The best way to bubble that error from the server side (using php) to the client side is to send a header through the Ajax request somewhere in the 400's (which is always associated with errors). Once the Ajax request receives this it will trigger your error function. This also means that you do not have to define an error: call in every $.ajax call.

header('HTTP/1.0 419 Custom Error');

Quote from w3.org header information

Error 4xx, 5xx The 4xx codes are intended for cases in which the client seems to have erred, and the 5xx codes for the cases in which the server is aware that the server has erred. It is impossible to distinguish these cases in general, so the difference is only informational. The body section may contain a document describing the error in human readable form. The document is in MIME format, and may only be in text/plain, text/html or one for the formats specified as acceptable in the request.

Answer 5

Return an error code on the server side using the HTTP error the best equates to what the error is. Then use the error callback. This will also allow you to show errors given by your webserver.