I have an $.ajax() request with the dataType set to "json." The server is returning JSON with the correct mime type of "application/json." And yet the responseText in my jqXHR object is always a string. What am I doing wrong? Is this how it's supposed to work?
Here's how I'm making the call:
var options = {
dataType:'json',
type: 'GET',
url: "http://example.com/api/"
};
var key = "PassToCallback";
var jqXHRObject = $.ajax(options).then(
function(data, textStatus, jqXHR, key) {
this.success(data, textStatus, jqXHR, key);
},
function(jqXHR, textStatus, errorThrown) {
this.error(jqXHR, textStatus, errorThrown);
}
);
console.log(jqXHRObject.getResponseHeader("content-type")); // application/json
console.log(typeof jqXHRObject.responseText); // string
So I have have to do a $.parseJSON(jqXHRObject.responseText)
to get an actual object. This seems unnecessary as $.ajax() should be automatically converting responseText according to the docs. Thanks!
I had the same problem. I returns a string because it formulated from an exception. E.g. I use a kernel listener with serialization to json on my Symfony2 project. Which is correct for proper REST headers.
Anyway, just parse it; this works for me:
$.ajaxSetup({
"error": function(jqXHR, status, thrownError) {
alert('error');
var responseText = jQuery.parseJSON(jqXHR.responseText);
console.log(responseText);
}
});
Try
$.ajaxSetup({
"error": function(jqXHR, status, thrownError) {
alert('error');
console.log(jqXHR.responseJSON);
}
});
You are using $.ajax in a way the docs don't describe. Using json
as the dataType just means that the data passed to the success
callback will be parsed. Use it like this:
$.ajax({
dataType:'json',
type: 'GET',
url: "http://example.com/api/"
success: function(data, textStatus, jqXHR) {
// `data` contains parsed JSON
},
error: function(jqXHR, textStatus, errorThrown) {
// Handle any errors
}
});
I don't see anything in the documentation that suggests responseText would be anything other than exactly what the name implies: text.
Why not just use .getJSON? That would get rid of half of the code you wrote, and it'll convert the response to JSON. Win/win.
Step 1: Stringify the jqXHR
var errorString = JSON.stringify(jqXHR.responseText);
Step 2: change that string to Jquery Object
var $errorObj = $(errorString);
Step 3: Find and get what part of responseText you want.
var errorMessage = $errorObj.find('p').eq(1).text();
/* Here Im finding `Message:` thrown by the server, which is inside <p> tag */
Thats it.
$.ajax( /* ... */ ).fail( function(jqXHR, textStatus, errorThrown) {
var errorString = JSON.stringify(jqXHR.responseText);
var $errorObj = $(errorString);
var errorMessage = $errorObj.find('p').eq(1).text();
alert(errorMessage);
} );