JavaScript function that returns AJAX call data

Question

I would like to create a JavaScript function which returns the value of a jQuery AJAX call. I would like something like this.

function checkUserIdExists(userid){
    return $.ajax({
        url: 'theurl',
        type: 'GET',
        cache: false,
        data: {
           userid: userid
        },
        success: function(data){
            return data;
        }
    });
}

I know I can do this by setting async to false but I would rather not.

score 32 · Answer 1 · edited May 23 '17 at 12:02

You can't return data returned by an AJAX call unless you want to call it synchronously (and you don't – trust me). But what you can return is a promise of a data returned by an AJAX call and you can do it actually in a very elegant way.

(UPDATE: Please note that currently jQuery Promises are not compatible with the Promises/A+ specification - more info in this answer.)

Basically you can return the return value of your $.ajax(...) call:

function checkUserIdExists(userid){
    return $.ajax({
        url: 'theurl',
        type: 'GET',
        cache: false,
        data: {
           userid: userid
        }
    });
}

and someone who calls your function can use it like this:

checkUserIdExists(userid).success(function (data) {
    // do something with data
});

See this post of mine for a better explanation and demos if you are interested.

+1. A less-lazy version of my answer :) – Matt Ball Mar 01 '11 at 05:12 — Matt Ball, Mar 01 '11 at 05:12

score 16 · Answer 2 · answered Mar 01 '11 at 04:56

16

you can pass in a callback function:

function checkUserIdExists(userid, callback) {
    $.ajax({
        ...
        success: callback
    });
}

checkUserIdExists(4, function(data) {

});

answered Mar 01 '11 at 04:56

Omer Bokhari

57,458
12
44
58

+1 - This is what I was thinking, but in a clean, concise code example. – jamesmortensen Mar 01 '11 at 05:00
There is an important thing in here. You must add `async: false` property in `$.ajax` method. If not you don't get data into `global var`. That's an additional info. – Yasin Yörük Nov 27 '15 at 09:05
Why is this a good answer? The op asked how to return a value, and this code returns nothing at all. – m.arthur Aug 11 '22 at 05:39

score 9 · Accepted Answer · answered Mar 01 '11 at 04:59

With jQuery 1.5, you can use the brand-new $.Deferred feature, which is meant for exactly this.

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.ajax({ url: "example.php" })
    .success(function() { alert("success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });

Source

how to read json data from this variable jqxhr – numerah Oct 30 '15 at 10:19 — numerah, Oct 30 '15 at 10:19

score 8 · Answer 4 · answered Jun 20 '12 at 01:55

As of jQuery 1.8, the "success", "error" and "complete" callback are deprecated. Instead you should be using "done", "fail" and "always".

So you could have:

function checkUserIdExists(userid, callback) {
        return $.ajax({
        url: 'theurl',
        type: 'GET',
        cache: false,
        data: {
           userid: userid
        }
    })
    .done(callback)
    .fail(function(jqXHR, textStatus, errorThrown) {
        // Handle error
    });
}

checkUserIdExists(2, function(data) {
    console.log(data); // Do what you want with the data returned
});

score 3 · Answer 5 · answered Mar 01 '11 at 04:54

3

This isn't how JavaScript asynchronous programming was really meant to be done. Instead, use a callback in your success function to call another function to use your data returned from the server.

answered Mar 01 '11 at 04:54

jamesmortensen

33,636
11
99
120

+1 for thinking what i was thinking – Omer Bokhari Mar 01 '11 at 05:04

score 2 · Answer 6 · answered Mar 01 '11 at 05:06

2

Tim, the two scenarios are mutually exclusive; an asynchronous operation will not serve any purpose for, nor will it be able to retrieve returned data.

You should look at an event-enabled infrastructure for your ajax calls

answered Mar 01 '11 at 05:06

Olaseni

7,698
16
44
68

JavaScript function that returns AJAX call data

6 Answers6

Linked