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? — user229044
– user229044 ♦, Commented May 3, 2013 at 17:43
It may help solve this problem: stackoverflow.com/questions/14220321/… — Sajad Mirzaei
– Sajad Mirzaei, Commented Sep 17, 2019 at 6:47

jamesmortensen · Accepted Answer · 2012-05-26 21:57:59Z

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);

Hasnu zama · Accepted Answer · 2016-04-30 20:01:57Z

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, 2016 at 20:01

Hasnu zama

1969 bronze badges

1 Comment

jamesmortensen Over a year ago

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.

lanzz · Accepted Answer · 2012-05-26 19:07:30Z

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, 2012 at 19:07

lanzz

43.4k12 gold badges93 silver badges99 bronze badges

3 Comments

hansi Over a year ago

hm ok. And there is no other possibility to achieve something like that then?

Anders Abel Over a year ago

+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.

lanzz Over a year ago

You can use Deferreds to return an object that you can attach success/failure callbacks later on: api.jquery.com/category/deferred-object

Anders Abel · Accepted Answer · 2012-05-26 19:09:20Z

0

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.

answered May 26, 2012 at 19:09

Anders Abel

69.6k18 gold badges154 silver badges221 bronze badges

Comments

soheil bijavar · Accepted Answer · 2013-12-11 12:01:13Z

0

add this property that's help u

async: false

answered Dec 11, 2013 at 12:01

soheil bijavar

1,2132 gold badges10 silver badges18 bronze badges

Collectives™ on Stack Overflow

Return value of JQuery ajax call

5 Answers 5

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related