How to Return ajax result in success?

Question

Even though this question has already been answered and I have been through some of them, I still can't find what am I doing wrong.

Basically I have a function which return the success result of ajax:

var Functioncalling = function(id){
var Infotoreturn=null;
formdata = {
    'id': id
};

$.ajax({
    type: 'POST', 
    url: 'http://localhost:20012/pr/servlet', 
    data: formdata,
    contentType: "text/html",
    success: function(result){
       console.log("1="+result);
       Infotoreturn = result;
    }
});
console.log("2="+Infotoreturn);
return Infotoreturn;
}

Calling the function:

var idreturned = Functioncalling(idvalue);
console.log("3="+idreturned);

Now in my first console output I'm getting exactly the data as I'm suppose to. But the second and third output both is null.

You can't return the result of an asynchronous request. Async requests happen out of the (synchronous) flow of the rest of your code, so by the time you try to return the result, the request has not yet resolved. You need to learn about promises or, in jQuery, deferred objects. — Mitya, Apr 01 '17 at 11:05
Adding to what @Utkanos has said, your return statement at the end is premature. The variable `Infotoreturn` will be null, because the Ajax call is performed asynchronously, that is, in parallel. The main function will return before its operation has been completed. The console will log the result, but it will be too late for the variable. — Manngo, Apr 01 '17 at 11:10
That’s right. Effectively, and Ajax call is delayed in the background, so the `return` statement still has the original value. You can either work with more advanced features such as Promises & deferred objects, or you can write your next step as a callback. I will illustrate the latter in an answer. — Manngo, Apr 01 '17 at 11:28
With asynchronous programming you need to change how you think about code. Read and understand this: http://stackoverflow.com/questions/17808651/return-function-javascript/17810720#17810720 and this: http://stackoverflow.com/questions/17460556/undefined-return-value-from-the-function-call-javascritpt/17460802#17460802 — slebetman, Apr 02 '17 at 02:33

Manngo · Accepted Answer · 2017-04-02T02:10:31.990

0

Adding to what @Utkanos has said, your return statement at the end is premature.

The variable Infotoreturn will be null, because the Ajax call is performed asynchronously, that is, in parallel. The main function will return before its operation has been completed. The console will log the result, but it will be too late for the variable.

Effectively, and Ajax call is delayed in the background, so the return statement still has the original value.

You can either work with more advanced features such as Promises & deferred objects, or you can write your next step as a callback.

Here is an example of using a callback:

var Functioncalling = function(id,callback) {
    var Infotoreturn=null;
    formdata = {
        'id': id
    };

    $.ajax({
        //  existing code
        success: function(result){
           console.log("1="+result);
            //  Modification
           callback(result);
        }
    });
    //  nothing to report yet
}
function where_I_need_the_result(result) {
    console.log('I got: '+result);
}

Functioncalling(id,where_I_need_the_result);

edited Apr 02 '17 at 02:10

answered Apr 01 '17 at 11:34

Manngo

14,066
10
88
110

Sorry for my late reply. anyway, So I added `return result` in `step2()` and I Did this: `function where_I_need_the_result(){var details = Functioncalling(id,step2); console.log(details);}` and the details is undefined, why? – jaksdfjl Apr 01 '17 at 15:03
You will never get the result from `Functioncalling` unless you make it wait for the result. That is, to make the Ajax call synchronously. That is deprecated on the main thread for good reasons. In the above example, I have changed `step2` to `where_I_need_the_result` to illustrate how it would be used. – Manngo Apr 02 '17 at 02:10
@jaksdfjl: Read the answer carefully. You are missing a very important point **pass the code you want to process the result instead of returning the result**. You can't do `details = Functioncalling(id)`, you **must** do `Functioncalling(id,function(details) {/*details are available in this scope*/})` – slebetman Apr 02 '17 at 02:25

How to Return ajax result in success?

1 Answers1