Have JavaScript method return the result of jQuery AJAX call

Question

Possible Duplicate:
How to return the response from an AJAX call from a function?

function Run(someJsonObject) {
    $.ajax({
        type: "post",
        contentType: "application/json; charset=utf-8",
        url: "/MyWebService",
        data: JSON.stringify(someJsonObject),
        dataType: "json",
        success: function (data) {
            var parsedJson = jQuery.parseJSON(data.d);
            // Do some magic...

            return true; // success!
        },
        error: function (jqXHR, textStatus, errorThrown) {
            return false;
        }
    });

}

var result = Run({dummy:'dummy'});

If I'm not mistaken, the above function will not return true or false, but rather it will be undefined. I want to return the result of the AJAX call, I'd prefer to make it synchronous (I realize I'm using AJAX). How would I accomplish this?

`return true` is seen as "continue" to jQuery. `success` is a method of a jquery function object. Right now, you are not going to be returning anything, and that is why you see `undefined` as `result`. — Travis J, Jan 25 '13 at 23:05

score 2 · Answer 1 · answered Jan 25 '13 at 23:02

You are backwards, let your ajax run first.

$(function () {
    $.ajax({
        type: "post",
        contentType: "application/json; charset=utf-8",
        url: "/MyWebService",
        data: JSON.stringify(someJsonObject),
        dataType: "json",
        success: function (data) {
            var parsedJson = jQuery.parseJSON(data.d);
            // Do some magic...
            DoStuffWithResult(data.d);
            return true; // success!
        },
        error: function (jqXHR, textStatus, errorThrown) {
            return false;
        }
    });
});

function DoStuffWithResult(result){
    //time to rock, i have my result
}

score 1 · Accepted Answer · answered Jan 25 '13 at 23:06

If you add the async option to your jquery call, it stops being asynchronous.

That being said, this is usually a bad idea and can probably be handled a better way. Usually, this is done by doing your ajax call first and working with your data in your success function.

If you are really adamant about doing it this way, though, this is what you want:

function Run(someJsonObject) {
     var result;
     $.ajax({
        async: false,
        type: "post",
        contentType: "application/json; charset=utf-8",
        url: "/MyWebService",
        data: JSON.stringify(someJsonObject),
        dataType: "json",
        success: function (data) {
            var parsedJson = jQuery.parseJSON(data.d);
            // Do some magic...

            result = true; // success!
        },
        error: function (jqXHR, textStatus, errorThrown) {
            result = false;
        }
    });
    return result;
}

var result = Run({dummy:'dummy'});

In this case, `result` will be the promise object `$.ajax()` returns, not the return value of the success or error handlers. — freethejazz, Jan 25 '13 at 23:11
Even though setting async to false is bad practice, it worked in my scenario. Thank you. — contactmatt, Feb 18 '13 at 00:28

score 0 · Answer 3 · answered Jan 25 '13 at 23:10

If you want to make an ajax request in jquery synchronous and have it be the return value of Run:

function Run(someJsonObject) {
    var returnValue;
    $.ajax({
        type: "post",
        async: false,
        contentType: "application/json; charset=utf-8",
        url: "/MyWebService",
        data: JSON.stringify(someJsonObject),
        dataType: "json",
        success: function (data) {
            var parsedJson = jQuery.parseJSON(data.d);
            // Do some magic...

            returnValue = true; // success!
        },
        error: function (jqXHR, textStatus, errorThrown) {
            returnValue = false;
        }
    });
    return returnValue;

}

I added async: false to the ajax options and used a local variable (accessible to the success and error handlers) as the return value.

You can't just return $.ajax(/* snip */) because that returns a promise object.

score 0 · Answer 4 · answered Jan 25 '13 at 23:14

You can simplify

$.post('/MyWebService', JSON.stringify(someJsonObject), function(r) {
   if(r.success) {
       // do something (1)
   } else {
       // do else something (2)
   } 
},'json').error(function() { 
   alert('comunication error');
 });

If you get any response like this

{ "success": true, data: "my_data" }

execute something (1) else (2)

If not a valid json or timeout trigger .error()

Have JavaScript method return the result of jQuery AJAX call

4 Answers4