Returning JSON data out of the callback function

Question

Is it possible to return the msg variable in javascript below out of the callback function? I tried doing this, but got a null, even though the msg variable had data in it while in the scope of the callback function.

var msg = load();


function load()
{
     $.ajax({  
     type: "POST",  
     url: "myPage.aspx/MyMethod",  
     data: jsonText,  
     contentType: "application/json; charset=utf-8",  
     dataType: "json",  
     success: function (msg) { return msg;  // Doesn't return anything because
                                            //it's automatically called on success??? 
     },  
     failure: function () { alert("Failure"); }  
     }); 
}

possible duplicate of [Return "success:" method's data?](http://stackoverflow.com/questions/7753844/return-success-methods-data) — Quentin, Oct 24 '11 at 06:21
@Quentin: That question is actually a duplicate as well (and its accepted answer is quite poor), of [this other one](http://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success) that has much better answers (although still none demonstrating both a callback and, separately, a synchronous request). — T.J. Crowder, Oct 24 '11 at 07:00

score 3 · Answer 1 · edited May 26 '13 at 23:17

Not with an asynchronous request, which is the normal kind of ajax request and the preferred kind. That's because load returns before you get your reply from the server, so obviously it can't return the msg. Instead, have load accept a callback:

load(function(msg) {
    // Use msg here
});

function load(callback)
{
    $.ajax({  
        type: "POST",  
        url: "myPage.aspx/MyMethod",  
        data: jsonText,  
        contentType: "application/json; charset=utf-8",  
        dataType: "json",  
        success: function (msg) {
            // Call our callback with the message
            callback(msg);
        },  
        failure: function () {
            // Call our callback with an indication things failed
            callback(null); // Or however you want to flag failure
        }
     }); 
}

If absolutely unavoidable, you could use a synchronous request by setting async: false in your $.ajax options (that's a link to the docs), then do it like this:

var msg = load();

function load(callback)
{
    var result;
    $.ajax({  
        type: "POST",  
        url: "myPage.aspx/MyMethod",  
        data: jsonText,  
        contentType: "application/json; charset=utf-8",  
        dataType: "json",  
        async: false,
        success: function (msg) {
            // Set the `result` value here. We can't *return* it
            // here because, of course, that would just return it
            // from our `success` function.
            result = msg;
        },  
        failure: function () {
            result = null; // Or however you want to flag failure
        }
     });

     // Because we've made the request synchronous, we won't get here
     // until the ajax call is complete and `result` has been set by
     // the callbacks above; we can now return it.
     return result;
}

But synchronous requests make for a poor user experience and, moreover, are almost never necessary, so should be avoided as much as possible.

score 0 · Answer 2 · answered Oct 24 '11 at 06:18

0

You would need to pass a callback to load() because the XHR is asynchronous.

BTW, msg should contain undefined if you don't explicitly return anything.

answered Oct 24 '11 at 06:18

alex

479,566
201
878
984

Returning JSON data out of the callback function

2 Answers2

Linked