[jQuery] JSON response is null, but the URL is echoing correctly.

Question

I have a form being AJAX'd in by jQuery on a page with multiple forms. I'm performing the following function, which is a wrapper for the $.ajax function:

function do_json_get(uri){
    var ret = '';
    var url = AJAX_URL + uri;

    $.ajax({
        type: 'GET',
        url: url,
        async: false,
        success: function(data) {
            ret = data.html;
        },
        dataType: 'json'
    });

    return ret;
}

When I go to the AJAX server directly (which is rendering the form in PHP), I get the raw JSON response - so I know the server is outputting to the browser, and the AJAX server is doing other things like setting the proper cookies, so I know that the connection is good (I get a 200 response code). Yet the data object is coming back null.

What else could I be missing?

Answer 1

Oh boy. This question again.

AJAX: Asynchronous JavaScript And XML*. Asynchronous. Asynchronous. Asynchronous.

Your function, do_json_get() returns ret before the success handler function in the AJAX call executes. The order of operation is not proceeding, here, from top to bottom. In other words, you just can't do it that way.

Because of its asynchronous nature, AJAX operates on callbacks, not return values. You need to change your paradigm. The success handler function needs to do whatever is required with data.html itself, or pass it off to another function.

* Yes, I know the XML part of the original acronym is largely vestigial these days

Answer 2

Here's a guess. If you're serving the page from the file system, Firefox (and I think Chrome) will see it as originating from a different domain. You'll get the 200 response, but no data.

Try Safari, or maybe give jsonp a shot in place of json.

EDIT:

Since you're getting the data from a different domain, it won't work. I think it is not allowed by the XMLHTTPRequest.