jQuery AJAX Error Handling (HTTP Status Codes)
Check out jQuery.ajaxError()
It catches global Ajax errors which you can handle in any number of ways:
if (jqXHR.status == 500) {
// Server side error
} else if (jqXHR.status == 404) {
// Not found
} else if {
...
Alternatively, you can create a global error handler object yourself and choose whether to call it:
function handleAjaxError(jqXHR, textStatus, errorThrown) {
// do something
}
$.ajax({
...
success: function() { ... },
error: handleAjaxError
});
FtDRbwLXw6
Updated on November 20, 2020Comments
-
FtDRbwLXw6 over 3 years
We have an API which uses proper HTTP status codes for errors, and responds with JSON-encoded responses and appropriate
Content-Type
header. My situation is thatjQuery.ajax()
triggers theerror
callback when it encounters an HTTP error status, and not thesuccess
callback, so even when we have an intelligible JSON response, we have to resort to something like this:$.ajax({ // ... success: function(response) { if (response.success) { console.log('Success!'); console.log(response.data); } else { console.log('Failure!'); console.log(response.error); } }, error: function(xhr, status, text) { var response = $.parseJSON(xhr.responseText); console.log('Failure!'); if (response) { console.log(response.error); } else { // This would mean an invalid response from the server - maybe the site went down or whatever... } } });
Is there a better paradigm than doing identical error handling in two spots in each
jQuery.ajax()
call? It's not very DRY, and I'm sure I've just missed something somewhere on good error handling practices in these cases.