How to make a JavaScript function that will return data from AJAX?

Question

Possible Duplicate:
How to return the response from an AJAX call from a function?

I have tried debugging in Google Chrome's Developer Console but in any way I cant get the result I want. I want to create a javascript function that will return a value from an external file through AJAX. I have tried this script:

var site = {
    token: function(){
        $.get('auth.php',function(data){
            return data;
        });
    }
};

...when I call the site.token() function it should return the fetched contents from auth.php. But it just doesn't. It is always undefined. I also tried this:

var site = {
    token: function(){
        var token = null;
        $.get('auth.php',function(data){
            token = data;
        });
        return token;
    }
};

But its still the same. I also find a work around by doing this:

var token = $.get('auth.php',function(data){
    return data;
});
token.responseText;

With that codes, I can now get my expected result. But when I put it already in a function:

var site = {
    token: function(){
        var token = $.get('auth.php',function(data){
            return data;
        });
        return token.responseText;
    }
};

...it fails again.

*P.S.: I don't know maybe I'm just really stressed in programming and why I can't do it right. -_-"

Thanks for your comment @Musa. I now understand my problem after reading the answer on the link. — Jhon Andrew, Jan 19 '13 at 18:06

score 2 · Answer 1 · edited May 23 '17 at 10:34

2

$.post() is short-hand for $.ajax(), and both are asynchronous (unless you do very bad things). You don't want to freeze the browser's GUI thread for the duration of the request to the php page. Thus site.token() can not reply with the data.

However, $.ajax() does return a promise (see http://www.erichynds.com/jquery/using-deferreds-in-jquery/ and how does jquery's promise method really work?). In essence, it says "I promise I'll call you back when I'm done." So, you can construct the class like this:

var site = {
    token: function(){
        var promise = $.get('auth.php',function(data){
            return data;
        });
        return promise;
    }
};

and call it like this:

var promise = site.token();
promise.done(function (data) {
    alert('got the data');
    console.dir(data);
});

edited May 23 '17 at 10:34

Community

1
1

answered Jan 19 '13 at 18:02

robrich

13,017
7
36
63

Note that `promise.success` is deprecated. – pimvdb Jan 19 '13 at 18:19
You are correct, http://api.jquery.com/jQuery.ajax/ is the reference. I've updated the example to use `prompse.done()` – robrich Jan 19 '13 at 18:31
Thanks for answering Sir @robrich. I have taken ideas from your example. Thanks a lot! – Jhon Andrew Jan 19 '13 at 18:37

score 1 · Answer 2 · answered Jan 19 '13 at 17:54

If this were possible, then the function idea could be discarded, and the syntax could just be:

var data = $.post("url");

It isn't possible however, because AJAX is asynchronous. It takes a while before the response is received. When this is the case, your function is called. That's the idea of passing a function.

There is no way to make this synchronous so as to use return. You can use $.ajax with async: false but it's going to be deprecated. The best you can do is return $.post(...) and then use .done(...) on the result to use the response.

score 0 · Answer 3 · answered Jan 19 '13 at 17:59

0

Ajax calls are asynchronous, thus you use your data before it is fetched. Consider using deffered object. http://api.jquery.com/category/deferred-object/

answered Jan 19 '13 at 17:59

Hayk

109
6

How to make a JavaScript function that will return data from AJAX?

3 Answers3