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 and JavaScript asynchronous return value / assignment with jQuery and lots of others... — Felix Kling
– Felix Kling, Commented Nov 10, 2011 at 9:43

James.Xu · Accepted Answer · 2011-11-10 09:36:04Z

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, 2011 at 9:36

James.Xu

8,2975 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

row1 Over a year ago

You can turn off asynchronous requests if that is what you really want: api.jquery.com/jQuery.ajax , look for the setting 'async'.

Abdul Munim Over a year ago

async: false often hangs the browser till the server response

Felix Kling Over a year ago

@row1: Synchronous, I suppose "JAX", requests are in general not a good idea.

zatatatata Over a year ago

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.

row1 Over a year ago

@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.

Abdul Munim · Accepted Answer · 2011-11-10 09:40:00Z

3

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);
});

answered Nov 10, 2011 at 9:40

Abdul Munim

19.2k8 gold badges54 silver badges61 bronze badges

1 Comment

peter.o Over a year ago

Thanks a lot. This is the solution I've been searching for :)

Moe Sweet · Accepted Answer · 2011-11-10 09:40:39Z

0

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);
}

answered Nov 10, 2011 at 9:40

Moe Sweet

3,7013 gold badges37 silver badges46 bronze badges

Collectives™ on Stack Overflow

Save response from jQuery ajax function

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related