jQuery Ajax - how to get response data in error

JavascriptJquery

Javascript Problem Overview


I have a simple web application. I've created the server REST API so it will return a response with HTTP code and a JSON (or XML) object with more details: application code (specific to scenario, message that describe what happened etc.).

So, for example if a client send a Register request and the password is too short, the response HTTP code will be 400 (Bad Request), and the response data will be: {appCode : 1020 , message : "Password is too short"}.

In jQuery I'm using the "ajax" function to create a POST request. When the server returns something different from HTTP code 200 (OK), jQuery defines it as "error".

The error handler can get 3 parameters: jqXHR, textStatus, errorThrown. Ho can I get the JSON object that sent by the server in error case?

Edit:

  1. Here is my JS code:

    function register (userName, password) { var postData = {}; postData["userName"] = userName; postData["password"] = password;

     $.ajax ({
     	dataType: "json",
     	type: "POST",
     	url: "<server>/rest/register",
     	data: postData,
     	success: function(data) {
     		showResultSucceed(data);
     		hideWaitingDone();
     	},
     	error: function (jqXHR, textStatus, errorThrown) {
    
     		showResultFailed(jqXHR.responseText);
     		hideWaitingFail();
     	}
     })
    

    }

  2. When looking at Firebug console, it seems like the response is empty. When invoking the same request by using REST testing tool, I get a response with JSON object it it.

What am I doing wrong?

Javascript Solutions


Solution 1 - Javascript

Here's an example of how you get JSON data on error:

$.ajax({
    url: '/path/to/script.php',
    data: {'my':'data'},
    type: 'POST'
}).fail(function($xhr) {
    var data = $xhr.responseJSON;
    console.log(data);
});

From the docs:

> 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.

Otherwise, if responseJSON is not available, you can try $.parseJSON($xhr.responseText).

Solution 2 - Javascript

directly from the docs

> The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of > jQuery 1.5 is a superset of the browser's native XMLHttpRequest > object. For example, it contains responseText and responseXML > properties, as well as a getResponseHeader()

so use the jqXRH argument and get the responseText property off it.

In the link above, look for the section entitled

The jqXHR Object

Solution 3 - Javascript

I also faced same problem when i was using multipart/form-data. At first I thought multipart/form-data created this mess, but later i found the proper solution.

  1. JS code before:

    var jersey_url = "http://localhost:8098/final/rest/addItem/upload";; var ans = $.ajax({ type: 'POST', enctype: 'multipart/form-data', url: jersey_url, data: formData, dataType: "json", processData: false, contentType: false success : funtion(data){ var temp = JSON.parse(data); console.log("SUCCESS : ", temp.message);
    } error : funtion($xhr,textStatus,errorThrown){ console.log("ERROR : ", errorThrown); console.log("ERROR : ", $xhr); console.log("ERROR : ", textStatus); } });

Here when error occurred, it showed me this in console :-
Error :
Error : { abort : f(e), always : f(), .... , responseJSON :"{"message":"failed"}" }
Error : error

Thus i came to know that we have to use $xhr.responseJSON to get the string message which we sent from rest api.

  1. modified/working error funtion:

    error : funtion($xhr,textStatus,errorThrown){ var string= $xhr.responseJSON; var json_object= JSON.parse(string); console.log("ERROR : ", json_object.message); } Thus will output "Error : failed" on console.

Solution 4 - Javascript

After spending so much time on this problem, I found the problem.

The page is under the URL: www.mydomain.com/register
The REST api is under the URL: server.mydomain.com/rest

Seems like this kind of POST is not so simple.
I'm going to search more information to understand this issue better (if you have more information please share it with me).

When putting the REST API under www.mydomain.com/rest - everything is working fine.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRoy TsabariView Question on Stackoverflow
Solution 1 - JavascriptmpenView Answer on Stackoverflow
Solution 2 - JavascripthvgotcodesView Answer on Stackoverflow
Solution 3 - JavascriptArchit SanghviView Answer on Stackoverflow
Solution 4 - JavascriptRoy TsabariView Answer on Stackoverflow