jquery how to check response type for ajax call

Question

How can I determine the response type of ajax call in Jquery? At times, the server sends json response and at times it sends only the html for display purposes. Right now I am using

if(response.indexOf('Error'))
  //popup error message
else
 response.username
 response.address

Did you try looking at the header MIME type of the response? — Dick, Sep 18 '10 at 11:55

score 137 · Accepted Answer · answered Sep 18 '10 at 11:54

137

You can try it like:

$.ajax({
  type: "POST",
  url: "your url goes here", 
  data: "data to be sent", 
  success: function(response, status, xhr){ 
    var ct = xhr.getResponseHeader("content-type") || "";
    if (ct.indexOf('html') > -1) {
      //do something
    }
    if (ct.indexOf('json') > -1) {
      // handle json here
    } 
  }
});

Basically it is also using indexOf but it seems more reliable.

answered Sep 18 '10 at 11:54

Ankit Jaiswal

22,859
5
41
64

BTW I would suggest you to use only one format if possible. Like even if you are showing some simple message, you can use the json also. – Ankit Jaiswal Sep 18 '10 at 11:59
Thanks a lot. This is exactly what I am looking or.I wish jquery has a a shortcut for this :) – sam Sep 19 '10 at 13:09
3

btw, for anyone interested, if you call `xhr.getResponseHeader()` (without an argument) it results to an `Cannot call method 'toLowerCase' of undefined` error – periklis Mar 07 '14 at 12:43

Imdad · Answer 2 · 2013-05-30T10:58:58.210

17

You can simply use javascript's easy method to check the type

i.e.

if(typeof response=="object")
{
 // Response is javascript object
}
else
{
 // Response is HTML
}

If you use this method you don't have to write 2 extra parameter in the success callback.

edited May 30 '13 at 10:58

answered Jul 05 '12 at 10:17

Imdad

5,942
4
33
53

This is a bit of a hack, but it is the most simple solution. – Csongor Fagyal Apr 06 '15 at 02:00
I always get a `"string"` there – Alex from Jitbit Apr 26 '19 at 11:37
This doesn't work. If the server returns text/html as content type it will still be an object. – Mike Nov 21 '21 at 00:41
That's right. In such case also it is useful as you will require to check before you convert it to Object as it is not already. The best practice is to return the correct headers. – Imdad Nov 30 '21 at 14:34

score 11 · Answer 3 · answered Sep 22 '14 at 09:28

11

If the response is parsed as JSON, the jqXHR object will have a responseJSON property.

$.ajax(
    // ...
).done(function(data, textStatus, jqXHR) {
    if (jqXHR.responseJSON) {
        // handle JSON
    } else {
        // handle html
    }
}).fail(function(jqXHR, textStatus, errorThrown) {
    if (jqXHR.responseJSON) {
        // handle JSON
    else {
        // handle html
    }
})

From the jQuery.ajax documentation:

If json is specified, the response is parsed using jQuery.parseJSON before being passed, as an object, to the success handler. The parsed JSON object is made available through the responseJSON property of the jqXHR object.

answered Sep 22 '14 at 09:28

tyrion

1,984
1
19
25

This is not accurate because the response "hydration" relies on the format you asked. I tested a call like `$.ajax({.., dataType: 'html'})` and from the server side I send an `application/json` response, but jQuery doesn't fill the jqXHR.responseJSON field. – Mateo Tibaquira Sep 26 '14 at 16:31
Indeed, but the OP wanted to know the response type. Why would you specify `dataType: 'html'` if you know the server won't send 'html'? Probably specifying `dataType` forces jQuery to use that data type, skipping the auto detect. – tyrion Sep 29 '14 at 07:45
Yep, probably, but in my case, if I don't specify the `html` request, symfony returns the form in JSON which I don't want. Specific situations indeed. – Mateo Tibaquira Sep 29 '14 at 15:03
1

Well, I think this solution will work but it is not generic enough, because it also works with XML (jqXHR.responseXML) but not HTML (and other types). The most generic way for me is still jqXHR.getResponseHeader('content-type'). – Möhre Nov 14 '14 at 13:30

score 8 · Answer 4 · answered Dec 09 '11 at 12:57

8

The answers above didnt work for me so I came up with this solution:

success: function(data, textStatus , xhr) {
if(xhr.responseXML.contentType == "text/html") {
    //do something with html
    }
else if(xhr.responseXML.contentType == "application/json") {
    //do something with json
    }}

answered Dec 09 '11 at 12:57

SolidALb

130
2
10

This will likely not work if the content type is for example "text/html; charset=UTF-8" – Steven Mar 30 '16 at 19:45

score 0 · Answer 5 · answered Sep 18 '10 at 11:58

0

To accept a JSON reply, you can set the reply type as JSON. I usually design my server side code so they always return JSON reply. In the event it fails to do so for whatever reason, I would get an error in my AJAX call for having incorrect JSON format and I can process the reply from server as not being non JSON.

error: function(response, status, xhr){ 
// do something with the reply.
}

answered Sep 18 '10 at 11:58

Shamim Hafiz - MSFT

21,454
43
116
176

off-course I could ask my server to return an logic error formatted as JSON, but when your server is down or broken, you will not get a json body. – Ivan Feb 12 '15 at 14:50

jquery how to check response type for ajax call

5 Answers5

Linked