How do I catch an Ajax query post error?

Question

I would like to catch the error and show the appropriate message if the Ajax request fails.

My code is like the following, but I could not manage to catch the failing Ajax request.

function getAjaxData(id)
{
     $.post("status.ajax.php", {deviceId : id}, function(data){

        var tab1;

        if (data.length>0) {
            tab1 = data;
        }
        else {
            tab1 = "Error in Ajax";
        }

        return tab1;
    });
}

I found out that, "Error in Ajax" is never executed when the Ajax request failed.

How do I handle the Ajax error and show the appropriate message if it fails?

score 345 · Accepted Answer · edited Jul 22 '17 at 11:37

345

Since jQuery 1.5 you can use the deferred objects mechanism:

$.post('some.php', {name: 'John'})
    .done(function(msg){  })
    .fail(function(xhr, status, error) {
        // error handling
    });

Another way is using .ajax:

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
        alert( "Data Saved: " + msg );
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert("some error");
  }
});

edited Jul 22 '17 at 11:37

Peter Mortensen

30,030
21
100
124

answered May 14 '10 at 12:11

choise

23,516
19
74
130

15

@Yuck $.post can accept an error callback using deferred objects. Take a look at my answer below for an example. – Michael Venable Aug 24 '12 at 21:18
2

Also, I way to make `$.ajax` more readable is to use a hash for your `data`. For example: `{ name : 'John', location: 'Boston' }` – briangonzalez Jan 24 '13 at 15:56
3

The success and error callbacks above are obsolete as of jQuery 1.8 http://api.jquery.com/jQuery.post/ – Baldy Nov 27 '13 at 11:53
@MichaelVeneble i think you can use `$.post().error()` – clintgh Dec 19 '14 at 06:58

Michael Venable · Answer 2 · 2012-12-05T15:49:50.147

304

jQuery 1.5 added deferred objects that handle this nicely. Simply call $.post and attach any handlers you'd like after the call. Deferred objects even allow you to attach multiple success and error handlers.

Example:

$.post('status.ajax.php', {deviceId: id})
    .done( function(msg) { ... } )
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
    });

Prior to jQuery 1.8, the function done was called success and fail was called error.

edited Dec 05 '12 at 15:49

answered Aug 24 '12 at 21:17

Michael Venable

4,951
3
22
20

3

+1 Very nice, but still not crazy about the syntax. Hopefully it gets unified in a future release. – Yuck Aug 24 '12 at 22:55
28

This should be the accepted answer. The current accepted answer is "use a different method"; this answer says "here's how to make your method work". The latter is usually preferred on SO. Actually, this should be included in the $.post documentation!!! – Mark E. Haase Dec 29 '13 at 18:53
2

http://api.jquery.com/deferred.fail , http://api.jquery.com/deferred.done for documentation – Deleplace Aug 22 '14 at 09:58
1

By the way there is also `responseJSON` property which is also very handy in case of ajax type is `json`. – ivkremer Apr 15 '15 at 16:06
`xhr.responseText` appears to be the needle in the fail-callback haystack. But I would suggest adding `dataType: 'text'` to the 2nd parameter to $.post. That [might](https://api.jquery.com/jQuery.Ajax/#data-types) help direct an error message of a different content-type to show up in responseText. But I haven't checked. – Bob Stein Dec 17 '21 at 14:48

score 98 · Answer 3 · answered May 14 '10 at 12:12

$.ajax({
  type: 'POST',
  url: 'status.ajax.php',
  data: {
     deviceId: id
  },
  success: function(data){
     // your code from above
  },
  error: function(xhr, textStatus, error){
      console.log(xhr.statusText);
      console.log(textStatus);
      console.log(error);
  }
});

score 18 · Answer 4 · answered Feb 28 '14 at 21:39

18

$.post('someUri', { }, 
  function(data){ doSomeStuff })
 .fail(function(error) { alert(error.responseJSON) });

answered Feb 28 '14 at 21:39

marknery

1,483
3
19
26

5

Adding a bit more explanation here would help future readers. – Eric Brown Feb 28 '14 at 22:20

score 14 · Answer 5 · edited Jul 22 '17 at 11:38

14

A simple way is to implement ajaxError:

Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the .ajaxError() method are executed at this time.

For example:

$('.log').ajaxError(function() {
  $(this).text('Triggered ajaxError handler.');
});

I would suggest reading the ajaxError documentation. It does more than the simple use-case demonstrated above - mainly its callback accepts a number of parameters:

$('.log').ajaxError(function(e, xhr, settings, exception) {
  if (settings.url == 'ajax/missing.html') {
    $(this).text('Triggered ajaxError handler.');
  }
});

edited Jul 22 '17 at 11:38

Peter Mortensen

30,030
21
100
124

answered May 14 '10 at 12:12

karim79

334,458
66
409
405

1

+1 - I would add that this handler gets several arguments, so you can display the actual error, response code, url, etc. – Nick Craver May 14 '10 at 12:14
Note that as of jQuery 1.8, the .ajaxError() method should only be attached to document. – Nanki Apr 30 '15 at 11:00

score 2 · Answer 6 · answered Sep 25 '19 at 11:55

You have to log the responseText:

$.ajax({
    type: 'POST',
    url: 'status.ajax.php',
    data: {
    deviceId: id
  }
})
.done(
 function (data) {
  //your code
 }
)
.fail(function (data) {
      console.log( "Ajax failed: " + data['responseText'] );
})

score 0 · Answer 7 · answered Mar 02 '20 at 22:01

you attach the .onerror handler to the ajax object, why people insist on posting JQuery for responses when vanila works cross platform...

quickie example:

ajax = new XMLHttpRequest();
ajax.open( "POST", "/url/to/handler.php", true );
ajax.onerror = function(){
    alert("Oops! Something went wrong...");
}
ajax.send(someWebFormToken );

score 0 · Answer 8 · answered Sep 13 '20 at 22:57

In case you want to utilize .then() which has a subtle difference in comparison with .done() :

return $.post(url, payload)
.then(
    function (result, textStatus, jqXHR) {
        return result;
    },
    function (jqXHR, textStatus, errorThrown) {
        return console.error(errorThrown);
    });

How do I catch an Ajax query post error?

8 Answers8

Linked

Related