I'm not a front-end developer, and I'm working on a casual project, which requires AJAX getting a piece of JSON.

$('#btn1').click(function() {
    $.ajax({
        url: '',
        type: "get",
        success: function(response, textStatus, jqXHR){
            var age1 = JSON.parse(response).data.age; // works for Firefox
            var age2 = response.data.age; // works for Chrome
        },
        error: function(jqXHR, textStatus, errorThrown){
            console.log('Error')
        },
        plete: function(){
            console.log('Complete')
        }
    });
});

I use Firebug in Firefox and Developer Tools in Chrome. The response is of type Object in Chrome, and is a String in Firefox.

Is there a generic way to do AJAX in jQuery and successfully parse the response?

I'm not a front-end developer, and I'm working on a casual project, which requires AJAX getting a piece of JSON.

$('#btn1').click(function() {
    $.ajax({
        url: 'http://mywebsite./persons/mike',
        type: "get",
        success: function(response, textStatus, jqXHR){
            var age1 = JSON.parse(response).data.age; // works for Firefox
            var age2 = response.data.age; // works for Chrome
        },
        error: function(jqXHR, textStatus, errorThrown){
            console.log('Error')
        },
        plete: function(){
            console.log('Complete')
        }
    });
});

I use Firebug in Firefox and Developer Tools in Chrome. The response is of type Object in Chrome, and is a String in Firefox.

Is there a generic way to do AJAX in jQuery and successfully parse the response?

• javascript
• ajax
• jquery

• Your server is probably not setting the proper response headers to make jQuery understand it's JSON in both browsers. – bfavaretto Commented Feb 15, 2013 at 2:32
• @bfavaretto the server side uses Jersey and the endpoint is annotated @Produces(MediaType.APPLICATION_JSON). – zihaoyu Commented Feb 15, 2013 at 2:36
• Weird, the Intelligent Guess should parse it in Firefox then. Maybe check the response headers from Firebug's Net tab to see if the browser actually receives that header. Nevertheless forcing the response to be parsed as JSON will take care of the issue. – Fabrício Matté Commented Feb 15, 2013 at 2:39
• 1 @FabrícioMatté I just looked. Its Content-Type is application/json, but the response is a string if I ment out dataType: 'json'. I'm going to keep the dataType option in $.ajax. Thanks. – zihaoyu Commented Feb 15, 2013 at 2:45
• Ok. =] Might be a bug with jQuery.ajax's Intelligent Guess then. – Fabrício Matté Commented Feb 15, 2013 at 2:47

1 Answer 1

Set dataType: 'json' in your $.ajax.

This will force the response inside the success/done handler to be an already parsed object, else, in case the response is not valid JSON, the error/fail handler will be called.

Note: Using dataType will force the response to be parsed as JSON even if you don't specify a Content-Type: application/json header in the response.

If you specify the header though, jQuery.ajax's Intelligent Guess would parse the response as an object even if you don't specify the dataType.

So, you can either use the dataType: 'json' in $.ajax or output the header Content-Type: application/json from the back-end and it will work fine. Or both if you want to be throughout. =]