getting json object back from failed $.ajax request

Question

I'm just getting started on this web project. Typescript is being used. I'm looking at this:

$.ajax({
        type: method,
        url: url,
        xhrFields: {
            withCredentials: $.support.cors
        },
        crossDomain: $.support.cors,
        data: data,
        dataType: (this.options.fallbackMethod ? this.options.fallbackMethod : "json")
    }).then(
        (data, textStatus, jqXHR) => { if (typeof (successCallback) === "function") successCallback(data, textStatus, jqXHR); },
        (jqXHR, textStatus, errorThrown) => {
            console.log("ajax failed: ");
            console.log(errorThrown);
            console.log(jqXHR);
            console.log(textStatus);
            if (typeof (failCallback) === "function") failCallback(jqXHR, textStatus, errorThrown);
        }
    );

This gets called when we make a request to the server. When I get a bad request from the server, I see in Firebug and Fiddler, that the server is sending back a JSON object with the error code (e.g. 400), and the error message ("couldn't find that resource.").

What I don't understand though, is how to get that JSON object back so I can parse it. When I log all the parameters (errorThrown, jqXHR, textStatus), there doesn't seem to be a way to get the JSON back. I just see the responseText property that has the message and error code bundled up in a string, but not the JSON object. I did do a check to make sure that the dataType was in fact json before this method was called. Any thoughts? Thanks in advance.

Confusing - usually, no meaningful data is returned when there is an error getting data from the server. If there is no error getting data from the server, but the request resulted in some error-style response, then the server should be sending a "success"-ful response (200) with error data for you to handle on the client. Do you happen to have control over this server, or is it just a service you are using? — Adam Jenkins, May 16 '13 at 01:14
Please pardon my prior comment i'm way to tired to be solving your problems :) — Gus, May 16 '13 at 01:25
From your description of responseText containing a string instead of a JSON response, the answer may possibly be the same as this question: http://stackoverflow.com/questions/5825465/why-is-jqxhr-responsetext-returning-a-string-instead-of-a-json-object — Sybeus, May 16 '13 at 01:34

score 0 · Accepted Answer · answered May 16 '13 at 02:07

The server returned error is always stored in responseText which is exaclty what the name implies i.e. text. You can get around by simply parsing the responseText:

$.ajax({
        type: method,
        url: url,
        xhrFields: {
            withCredentials: $.support.cors
        },
        crossDomain: $.support.cors,
        data: data,
        dataType: (this.options.fallbackMethod ? this.options.fallbackMethod : "json")
    }).then(
        (data, textStatus, jqXHR) => { if (typeof (successCallback) === "function") successCallback(data, textStatus, jqXHR); },
        (jqXHR, textStatus, errorThrown) => {
            console.log("ajax failed: ");
            console.log(errorThrown);
            // Parse it: 
            var json = $.parseJSON(jqXHR.responseText);
            console.log(json)
            console.log(textStatus);
            if (typeof (failCallback) === "function") failCallback(jqXHR, textStatus, errorThrown);
        }
    );

score 0 · Answer 2 · answered May 16 '13 at 02:31

You should be able to get the JSON data through the jqXHR object's "responseText" property. The short example below is an ajax request that's using the "error" event to do this:

$.ajax({
    url: 'http://somewhere...',
    data: { somedata: 'somevalue' },
    type: 'POST',
    error: function (jqXHR, statusText, errorThrown) {
        // get the JSON here:
        var data = JSON.parse(jqXHR.responseText);
    }
});

getting json object back from failed $.ajax request

2 Answers2