function that return a value from ajax call request

Question

I want a function that returns a value from an ajax request. I want to stop javascript execution until the function get its value which is return by ajax asynchronous request. Something like:

function myFunction() {
    var data;
    $.ajax({
        url: 'url',
        data: 'data to send',
        success: function (resp) {
            data = resp;
        },
        error: function () {}
    }); // ajax asynchronus request 
    return data; // return data from the ajax request
}

What does the first A in AJAX stand for? – Barmar Apr 06 '13 at 05:17 — Barmar, Apr 06 '13 at 05:17

score 55 · Accepted Answer · answered Apr 06 '13 at 05:20

55

You need to register a callback function, something like this:

function test() {
    myFunction(function(d) {
        //processing the data
        console.log(d);
    });
}

function myFunction(callback) {
    var data;
    $.ajax({
        url: 'url',
        data: 'data to send',
        success: function (resp) {
            data = resp;
            callback(data);
        },
        error: function () {}
    }); // ajax asynchronus request 
    //the following line wouldn't work, since the function returns immediately
    //return data; // return data from the ajax request
}

answered Apr 06 '13 at 05:20

su-

3,116
3
32
42

2

No need to still store it in `data`. Just call the callback – Ian Apr 06 '13 at 05:22
1

@Ian still better than the rest of the kin :-) – John Dvorak Apr 06 '13 at 05:28
1

@JanDvorak Never said it wasn't :) Just trying to help improve the answer. – Ian Apr 06 '13 at 05:31
The complete yet concise code of this answer makes js async go 'click'. – scharfmn May 25 '15 at 07:35
I think the other answers go a little better with what the OP was originally asking. You can make another function that calls the ajax with asyn:false. This way the original method will wait for it. Then set a variable outside of the ajax call, to be set by the anonymous functions within ajax, and return that. function ajaxMethod(){ var returnVal; ajax{....success: returnVal = value ...error: returnVal = value..} return returnVal} – eaglei22 Jan 11 '17 at 20:28

score 15 · Answer 2 · answered Apr 06 '13 at 05:20

15

Ajax is asynchronous, that means that the ajax call is dispatched but your code keeps on running as happy as before without stopping. Ajax doesn't stop/pause execution until a response is received. You'll have to add an extra callback function or something like that.

    function myFunction() {
var data;
$.ajax({
    url: 'url',
    data: 'data to send',
    async: false,
    success: function (resp) {
        data = resp;
        callback.call(data);
    },
    error: function () {}
}); // ajax asynchronus request 
return data; // return data from the ajax request
  }

answered Apr 06 '13 at 05:20

thumber nirmal

1,639
3
16
27

You need to actually pass `data` or `resp` to the callback... – Ian Apr 06 '13 at 05:21
1

Well, you probably want `callback.call(this, data);` since `call`'s first parameter is for setting the `this` context in the function. – Ian Apr 06 '13 at 05:25
1

You also have to define the callback, Else it will give you error, – Abhinav bhardwaj Jun 04 '19 at 10:30

score 10 · Answer 3 · answered Apr 06 '13 at 05:19

10

you need to do asyn = False like :

$.ajax({
    async: false,
    // ...
    success: function(jsonData) {
    //Your Logic
    }
});

answered Apr 06 '13 at 05:19

ravisolanki07

637
3
13

1

That's in case you want an synchronous response, of course. – Pere Jun 03 '14 at 11:47
`async: false` blocks the user from performing any other action until the ajax finishes. – aagjalpankaj Feb 11 '20 at 13:06

score 7 · Answer 4 · answered Apr 06 '13 at 05:18

7

$.ajax({
        url: 'url',
        data: 'data to send',
        async: false,
        success: function (resp) {
            data = resp;
        },
        error: function () {}
    }); // ajax synchronus request

answered Apr 06 '13 at 05:18

Ryan

768
4
15

4

Synchronous request is deprecated now – tiwarinitin94 Sep 25 '18 at 15:42
@uniqueNt should i concern with this warning in console – Azhar Uddin Sheikh Aug 01 '21 at 06:19
@AzharUddinSheikh yes you should, if you wanna keep the code updated for future – tiwarinitin94 Aug 03 '21 at 06:26

Eli · Answer 5 · 2013-04-06T05:24:51.240

4

Use async: false for your ajax request since Ajax is asynchronous.

Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called. If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has completed yet.

From jQuery docs:

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false

edited Apr 06 '13 at 05:24

answered Apr 06 '13 at 05:18

Eli

14,779
5
59
77

1

You gotta give a better explanation than that. While that might work, the OP probably won't understand, since they don't understand the problem at hand. – Ian Apr 06 '13 at 05:19

function that return a value from ajax call request

5 Answers5