jQuery: How to get the HTTP status code from within the $.ajax.error method?

Question

I'm using jQuery to make an AJAX request. I want to perform different actions whether or not the HTTP status code is a 400 error or a 500 error. How can I achieve this?

$.ajax({
    type: 'POST',
    url: '/controller/action',
    data: $form.serialize(),
    success: function(data){
        alert('horray! 200 status code!');
    },
    error: function(data){
        //get the status code
        if (code == 400) {
            alert('400 status code! user error');
        }
        if (code == 500) {
            alert('500 status code! server error');
        }
    },
});

Update:

@GeorgeCummins mentioned that it "seemed odd" to work with the response body. This is the first time that I've attempted doing this sort of thing. Is my approach not a best-practice? What would you recommend? I created another StackOverflow question for this here: What response/status code should I send to an AJAX request when there is a user/form validation error?

Alex Reynolds · Accepted Answer · 2011-07-14 22:52:48Z

111

If you're using jQuery 1.5, then statusCode will work.

If you're using jQuery 1.4, try this:

error: function(jqXHR, textStatus, errorThrown) {
    alert(jqXHR.status);
    alert(textStatus);
    alert(errorThrown);
}

You should see the status code from the first alert.

edited Jul 14, 2011 at 22:52

answered Jul 14, 2011 at 22:45

Alex Reynolds

97.2k59 gold badges251 silver badges356 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrew Over a year ago

Oh, I see my problem. I was thinking that data was being passed to the error method, but it's actually jqXHR, textStatus, and errorThrown

Andrew Over a year ago

I like your answer because you mention the differences between the different versions of jQuery, which I didn't notice at first.

Codebeat Over a year ago

I'm using your example at jQ 2.x and status is always zero (0), textStatus always 'error' and errorthrown is empty. Any ideas? What I have done: Turn of the server after the page is loaded to figure out what happen.

disha Over a year ago

It worked for me when I got the status code 419 and I could handle the error.

wvdz · Accepted Answer · 2014-10-08 22:53:20Z

69

You should create a map of actions using the statusCode setting:

$.ajax({
  statusCode: {
    400: function() {
      alert('400 status code! user error');
    },
    500: function() {
      alert('500 status code! server error');
    }
  }
});

Reference (Scroll to: 'statusCode')

EDIT (In response to comments)

If you need to take action based on the data returned in the response body (which seems odd to me), you will need to use error: instead of statusCode:

error:function (xhr, ajaxOptions, thrownError){
    switch (xhr.status) {
        case 404:
             // Take action, referencing xhr.responseText as needed.
    }
}

edited Oct 8, 2014 at 22:53

wvdz

16.2k4 gold badges60 silver badges97 bronze badges

answered Jul 14, 2011 at 22:44

George Cummins

29k8 gold badges74 silver badges91 bronze badges

7 Comments

Andrew Over a year ago

I started down that route, but couldn't figure out how to get the data. How do you access the response body?

George Cummins Over a year ago

@Andrew: Why do you need to access the response body? Are you expecting useful data to be returned when a 400 or 500 error occurs?

Andrew Over a year ago

Yes, I'm using a status code of 400 for form validation errors. (not sure if that is appropriate or not)

George Cummins Over a year ago

In that case, can you take the appropriate form validation action in the body of the 400: function() {. Just remove the alert() and add the necessary code.

Paul Over a year ago

Why is it odd to tell the caller of the API what the exact problem is rather than just telling them 400.

|

CodeWhisperer · Accepted Answer · 2015-10-07 07:36:11Z

16

An other solution is to use the response.status function. This will give you the http status wich is returned by the ajax call.

function checkHttpStatus(url) {     
    $.ajax({
        type: "GET",
        data: {},
        url: url,
        error: function(response) {
            alert(url + " returns a " + response.status);
        }, success() {
            alert(url + " Good link");
        }
    });
}

answered Oct 7, 2015 at 7:36

CodeWhisperer

1,1952 gold badges20 silver badges40 bronze badges

2 Comments

henrry Over a year ago

this solution is best

am70 Over a year ago

this answer assumes that the first argument to the error handler is the response (as for the success handler), but this it not the case: the first argument is the jqXHR

genesis · Accepted Answer · 2011-07-14 22:44:30Z

9

use

   statusCode: {
    404: function() {
      alert('page not found');
    }
  }

-

$.ajax({
    type: 'POST',
    url: '/controller/action',
    data: $form.serialize(),
    success: function(data){
        alert('horray! 200 status code!');
    },
    statusCode: {
    404: function() {
      alert('page not found');
    },

    400: function() {
       alert('bad request');
   }
  }

});

answered Jul 14, 2011 at 22:44

genesis

51.1k20 gold badges99 silver badges127 bronze badges

1 Comment

joedotnot Over a year ago

how would you catch an unexpected statusCode, is there a catch-all or else handler in this version of the syntax?

Paras Sharma · Accepted Answer · 2021-10-16 17:14:08Z

0

Here you can use this too it works for me

$.ajax({
  success: function(data, textStatus, xhr) {
    console.log(xhr.status);
  },
  complete: function(xhr, textStatus) {
    console.log(xhr.status);
  } 
});

answered Oct 16, 2021 at 17:14

Paras Sharma

996 bronze badges

Collectives™ on Stack Overflow

jQuery: How to get the HTTP status code from within the $.ajax.error method?

Update:

5 Answers 5

4 Comments

7 Comments

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update:

5 Answers 5

4 Comments

7 Comments

2 Comments

1 Comment

Comments

Linked

Related