Save response from jQuery ajax function

Question

I've got a custom function, which calls ajax request and I'm able to save response data to variable and return it. 0 is always returned, but alert shows e.g. 3712.

Here is the function:

function getNo(index, val) {

var $ret = 0;

$('body').showLoading();
$.ajax({
    type: 'POST',
    url: BASE_URL + 'tools/no.php?id='+index+'&value='+val,
    data: $("#form").serialize(),
    cache: false,
    success: function(data) {
        $('body').hideLoading();
        alert('data: ' + data);
        $ret = data;
    }
});
return $ret;
}

possible duplicate of [return from a function ajax](http://stackoverflow.com/questions/5381804/return-from-a-function-ajax) and [JavaScript asynchronous return value / assignment with jQuery](http://stackoverflow.com/questions/7779697/javascript-asynchronous-return-value-assignment-with-jquery) and lots of others... — Felix Kling, Nov 10 '11 at 09:43

score 4 · Answer 1 · answered Nov 10 '11 at 09:36

4

because ajax is asynchronous, when return $ret; is executed, the response is not ready yet, so its initial value 0 is returned.

you have to do what you want to do in the success callback function rather than return.

answered Nov 10 '11 at 09:36

James.Xu

8,249
5
25
36

You can turn off asynchronous requests if that is what you really want: http://api.jquery.com/jQuery.ajax/ , look for the setting 'async'. – row1 Nov 10 '11 at 09:38
`async: false` often hangs the browser till the server response – Abdul Munim Nov 10 '11 at 09:41
@row1: Synchronous, I suppose "JAX", requests are in general not a good idea. – Felix Kling Nov 10 '11 at 09:46
Use of synchronous requests is discouraged, since it blocks everything in your webpage and it seems to the user that it's frozen, which might result in your application being closed. Use with extreme caution, or better, don't use at all. – zatatatata Nov 10 '11 at 09:49
@FelixKling Sure it is generally not a good idea. But if your service is guaranteed to return in a small amount of milliseconds then it might be useful (simpler) going down the more procedural path. – row1 Nov 10 '11 at 09:54

score 3 · Accepted Answer · answered Nov 10 '11 at 09:40

This will return ZERO because of the asynchronous call. Rather I would suggest you to pass a callback method to work with the response.

See an example below:

function getNo(index, val, callback) {
    var $ret = 0;

    $('body').showLoading();
    $.ajax({
        type: 'POST',
        url: BASE_URL + 'tools/no.php?id=' + index + '&value=' + val,
        data: $("#form").serialize(),
        cache: false,
        success: function (data) {
            $('body').hideLoading();
            callback(data);
        }
    });
    return $ret;
}

//USAGE
getNo(3, "value", function (data) {
    //do something with data responded from the server
    alert(data);
});

Thanks a lot. This is the solution I've been searching for :) — peter.o, Nov 10 '11 at 10:02

score 0 · Answer 3 · answered Nov 10 '11 at 09:40

Because "A" in Ajax stands for Asynchronous, return $ret; is executed before the Ajax call finds it's way back to success function.

Rather than trying to return the value, try to call a function within the ajax success block.

success: function(data) {
    $('body').hideLoading();
    alert('data: ' + data);
    $ret = data;
doSomething(data);
}

Save response from jQuery ajax function

3 Answers3

Linked