Return value of JQuery ajax call

Question

I want this function to return wether or not the ajax call was succesful or not. Is there any way I can do this? My code below doesn't do this.

function myFunction(data) {
var result = false;
$.ajax({
    type: "POST",
        contentType: "application/json",
        dataType: "json",
        url: "url",
        data: data,
        error: function(data){
             result = false;
             return false;
        },
        success: function(data){
            result = true;
            return true;
        }
     });
     return result;
}

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — user229044, May 03 '13 at 17:43
It may help solve this problem: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/57968689#57968689 — Sajad Mirzaei, Sep 17 '19 at 06:47

score 7 · Accepted Answer · answered May 26 '12 at 21:57

Unfortunately, you cannot return values to functions that wrap asynchronous callbacks. Instead, your success callback from the AJAX request will handoff the data and control to another function. I've demonstrated this concept below:

Definition for myFunction:

// I added a second parameter called "callback", which takes a function
 // as a first class object
function myFunction(data, callback) {
    var result = false;
    $.ajax({
        type: "POST",
        contentType: "application/json",
        dataType: "json",
        url: "url",
        data: data,
        error: function(data){
            result = false;

            // invoke the callback function here
            if(callback != null)  {
                callback(result);
            }

            // this would return to the error handler, which does nothing
            //return false;
        },
        success: function(data){
            result = true;

            // invoke your callback function here
            if(callback != null) {
                callback(result);                
            }

            // this would actually return to the success handler, which does
              // nothing as it doesn't assign the value to anything
            // return true;
        }
     });

     // return result; // result would be false here still
}

callback function definition:

// this is the definition for the function that takes the data from your
 // AJAX success handler
function processData(result) {

    // do stuff with the result here

}

invoke your myFunction:

var data = { key: "value" }; /* some object you're passing in */

// pass in both the data as well as the processData function object
 // in JavaScript, functions can be passed into parameters as arguments!
myFunction(data, processData);

score 4 · Answer 2 · answered Apr 30 '16 at 20:01

4

No need call back. You can achieve this using async property.

function myFunction(){
    var retVal;
    $.ajax({
        url:url,
        method: GET/POST,
        data: data,
        async: false,
        success:function(response) {
            retVal = response;
        }
    });
    return retVal;
}

answered Apr 30 '16 at 20:01

Hasnu zama

156
8

I don't think this isn't a good idea. Synchronous HTTP requests on a website are known to cause delays and hangs, because the rest of the code cannot execute until the server returns a response. This makes things slow and unusable. In fact, in [jQuery 1.8 this behavior is deprecated](http://api.jquery.com/jquery.ajax/). – jamesmortensen Jan 25 '19 at 10:40

score 1 · Answer 3 · answered May 26 '12 at 19:07

1

You can specify async: false in the AJAX configuration, though the documentation notes that this will also lock the browser for the duration of the AJAX call, so it is not recommended.

answered May 26 '12 at 19:07

lanzz

42,060
10
89
98

hm ok. And there is no other possibility to achieve something like that then? – hansi May 26 '12 at 19:09
+1, Didn't know it was even possible to disable the async behaviour, even though I can't see I would ever opt to do it. – Anders Abel May 26 '12 at 19:10
You can use Deferreds to return an object that you can attach success/failure callbacks later on: http://api.jquery.com/category/deferred-object/ – lanzz May 26 '12 at 19:15

score 0 · Answer 4 · answered May 26 '12 at 19:09

No, myFunction can't return the success of the ajax call, since the ajax call is done asynchronously.

You code will be executed in this order:

var result = false;
$.ajax sends the request to the server.
return result (which is still set to false).
When the response is received from the server, the success or error handler which contains result = false or result = true is called.

The correct way to handle this is to move any code that depends on the outcome of the ajax code into the success and error functions.

score 0 · Answer 5 · answered Dec 11 '13 at 12:01

0

add this property that's help u

async: false

answered Dec 11 '13 at 12:01

soheil bijavar

1,213
2
10
18

Return value of JQuery ajax call

5 Answers5

Linked