jQuery AJAX response type

Question

I'm trying to make a working example of jQuery 1.9.1 AJAX + icanhaz/mustache. This is my template:

<script id="user" type="text/html">
    {{#users}}<li>Username: {{ username }}, fullname: {{ fullname }}</li>{{/users}}
</script>

and this is my JavaScript:

$(document).ready( function() {
    $("#user-btn").click(function() {
        $.ajax({
            type: "GET",
            url: "../php/client/json.php",
            data: {
                type: "users"
            }
        }).done(function( response ) {
            var element = $('#dialog-message');
            element.html("<ul>");
            element.append(ich.user(response));
            element.append("</ul>");
        });
});

The AJAX response from this address looks something like:

{"users":[{"username":"jd","fullname":"John Doe"},{"username":"jl","fullname":"John Lennon"}]};

With the following code, icanhaz cannot render anything for me. I spent some time with javascript console and found out that the typeof response is string and I expected object. Icanhaz also expects object - that's why it didn't manage to render the correct response.

Am I doing something wrong or am I just a poor newbie who didn't know that jquery.ajax returns string responses always? If so, how should I handle them?

score 17 · Accepted Answer · answered Mar 27 '13 at 23:49

17

If you are getting a string returned from your AJAX call, you need to add dataType: "json". This will make jQuery parse the response as JSON, if possible.

$(document).ready( function() {
    $("#user-btn").click(function() {
        $.ajax({
            type: "GET",
            url: "../php/client/json.php",
            data: {
                type: "users"
            },
            dataType: "json"
        }).done(function( response ) {
            ...
        });
});

Are you sure your ich.user method expects an array of users and not just a single user object?

answered Mar 27 '13 at 23:49

Steve

8,609
6
40
54

yep, I'm sure, because I'm iterating through them (see [another question](http://stackoverflow.com/questions/15650487/icanhaz-mustache-loop-iterate-through-elements-js-error/15652623)). – ducin Mar 27 '13 at 23:55
OK... glad it is correct. Just thought I mentioned it, since the function naming looked odd. :) – Steve Mar 28 '13 at 00:03

score 4 · Answer 2 · answered Mar 27 '13 at 23:48

4

Try the option dataType: "json" for $.ajax.

answered Mar 27 '13 at 23:48

Marcel Gwerder

8,353
5
35
60

score 3 · Answer 3 · answered Mar 27 '13 at 23:53

3

Modify the click function:

$("#user-btn").click(function () {
    $.ajax({
        type: "GET",
        url: "../php/client/json.php",
        data: {
            type: "users"
        },
        dataType: 'json',
        success: function (data) {
            // Your code...
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
});

answered Mar 27 '13 at 23:53

palaѕн

72,112
17
116
136

1

can you explain what is wrong with `done` (you have replaced it with `success` and `error`)? – ducin Mar 27 '13 at 23:54
1

It is suggested no longer to use `success` and `error` because they may be removed in the future. `done` is the way to go. – Marcel Gwerder Mar 27 '13 at 23:55
Nothing wrong with it but this is a much better approach, as I have been using it in most of my jQuery ajax calls! And they work perfectly fine! – palaѕн Mar 27 '13 at 23:56
3

@Marcel - That is not correct... `jqXHR.success` and `jqXHR.error` are being deprecated, but not the methods within the `ajax` call. – Steve Mar 27 '13 at 23:57
@Will.i.am can you please explain why it is better apporach or give me any link so that I can study this topic? – ducin Mar 27 '13 at 23:59
Yes, sure. Here's is one [jQuery Ajax Function Example](http://www.jquery4u.com/function-demos/ajax/)! I hope it helps! – palaѕн Mar 28 '13 at 00:05
I disagree with the statement that @Will.i.am's solution is the "much better approach". It is mostly a matter of preference. I actually use the `success` and `error` approach myself most of the time, but there are certainly situations where the implementation of the `jqXHR` Promise implementation can be of benefit. – Steve Mar 28 '13 at 00:09

jQuery AJAX response type

3 Answers3