return from jquery ajax call

Question

hi im tryin to use the return from a jquery ajax call in my own function, but it keeps returning undefined.

    function checkUser2(asdf) {
    $.ajax({
        type: "POST",
        async: false,
        url: "check_user.php",
        data: { name: asdf },
        success: function(data){ 
            return data;
            //alert(data);
        }
    });  
}       


$("#check").click(function(){
    alert(checkUser2("muma"));
});

the ajax call definately works, because when i uncomment my alert i get the correct return, and i can see it in firebug. Am i doing something stupid.

Answer 1

The AJAX call is asynchronous - this means that the AJAX request is made out-of-order of usual program execution, and in your program that means that checkUser2() is not returning data to the alert.

You cannot use return values from $.ajax() calls in this way, instead move the code that utilises the AJAX return data to the success() function - that what it's for.

Answer 2

Try this instead:

 function checkUser2(asdf) {
    var result;
    $.ajax({
        type: "POST",
        async: false,
        url: "check_user.php",
        data: { name: asdf },
        success: function(data){ 
            result = data;            
        }
    });
    return result;  
}       


$("#check").click(function(){
    alert(checkUser2("muma"));
});

You may have to move the result variable out as a global javascript variable instead. I haven't tested this yet.

Answer 3

You could do this, I think:

function checkUser2(asdf) {
  var s = $.ajax({
        type: "POST",
        async: false,
        url: "check_user.php",
        data: { name: asdf },
        success: function(data){ 
            return data;
            //alert(data);
        }
    }).responseText;  
   return s;
}       

but, as in the 4th example of the jquery doc page for ajax function says, I think that

Blocks the browser while the requests is active. It is better to block user interaction > by other means when synchronization is necessary.

Answer 4

You could also store the "data" using jQuery's data method and associate it with a global jQuery object or local jQuery selector. For e.g.

success: function(data) {
  $.data('result', data);
}

The return value can the be accessed anywhere using

$.data('result')

You could also associate this to a local variable (for e.g. $('#myid').data()) so that its local to that object rather than in the global scope.