How can I return value from $.Ajax function?

Question

function get_url(){
    var returnValue  = null;
    $.ajax({
        async: false,
        type: "GET",
        url: "http://127.0.0.1:1337/?callback=?&command=get_url",
        dataType: "json",
        success: function(data){
            data = $.parseJSON(data);
            console.log(data[0].get_url); // "not_null"
            returnValue = data[0].get_url;
            }
    });

    console.log(returnValue); // "null"
    return returnValue;
}

Why function don't return "not_null" ?

Possible duplicate here: http://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success — Andrius Virbičianskas, Aug 12 '11 at 11:27
NO, becouse in http://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success is asynchronous request. — ExyTab, Aug 12 '11 at 11:32

score 2 · Answer 1 · answered Aug 12 '11 at 11:32

That is because your ajax method is so call it another thread. Once you call it your method will continue, but value will be set once ajax call is done. So you can wait, this is bad solution but it can help:

function get_url(){
    var returnValue  = null;
    var _done = false;
    $.ajax({
        async: false,
        type: "GET",
        url: "http://127.0.0.1:1337/?callback=?&command=get_url",
        dataType: "json",
        success: function(data){
            data = $.parseJSON(data);
            console.log(data[0].get_url); // "not_null"
            returnValue = data[0].get_url;
            _done = true;
            }
    });
    while(!_done) { }
    console.log(returnValue); // "null"
    return returnValue;
}

I think Andreas's solution of callbacks is much cleaner, rather than resorting to `while(!_done) { }` — Jeriko, Aug 12 '11 at 11:57

score 2 · Answer 2 · answered Aug 12 '11 at 11:34

You can't return the value from your ajax request. Because return is returning returnValue at once and not waiting for the ajax request.

If you want to receive the ajax response you can use a callback method:

function get_url(callback){
    var returnValue  = null;
    $.ajax({
        async: false,
        type: "GET",
        url: "http://127.0.0.1:1337/?callback=?&command=get_url",
        dataType: "json",
        success: function(data){
            data = $.parseJSON(data);
            console.log(data[0].get_url); // "not_null"
            returnValue = data[0].get_url;
            callback(returnValue);
        }
    });
}

And then call:

get_url(function(response) {
    console.log(response);
});

How can I return value from $.Ajax function?

2 Answers2