Is it possible to store a value returned from the server by jQuery.ajax( )?

Question

I've made myself this small script to return a value from the database but I found out that at the end of the $.ajax() function, the value stored was no longer kept. How could we store it so that we could use outside $.ajax(). The value returned from the server is simply a number 23.

            $(function(event) {
                var valueToBeUsed;
                var value;
                $.ajax({
                    type: "GET",
                    url: "get.php",
                    data: {value: "like"},
                    success: function(data) {
                        value = data;
                        alert(value);  //first time alert shows "23"
                    }
                });
                valueToBeUsed = value;
                alert(valueToBeUsed); //returns "undefined"
            });

look at this: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call — Shoaib Shakeel, Apr 08 '15 at 04:57
@ShoaibShakeel it is too complex i'm just a beginner with jQuery. Can you simplify it for me? — Drexel, Apr 08 '15 at 05:02

score 2 · Accepted Answer · answered Apr 08 '15 at 05:09

jQUery $.ajax() function default behave in asynchronous manner, mean, the process won't wait of ajax response, but you can perform task in following, ways

make ajax request synchronous: the code wait ajax response to move on next process, but it's not good idea because the page will be freeze until ajax not respond

$.ajax({async: false})

you can use callback function inside ajax success callback function, and perform task into callback function, see below sample code

     $(function(event) {

        var valueToBeUsed;
        var value;
        var assignValue = function(data){
           value = data;
           alert(value);
        }
        $.ajax({
            type: "GET",
            url: "get.php",
            data: {value: "like"},
            success: function(data) {
                assignValue.call(this, data);
            }
        });
    });

SgtBipul · Answer 2 · 2015-04-08T05:08:04.957

The ajax call is asynchronous, meaning it doesn't wait for the return data from the call to continue processing. The final two statements in your function will more than likely be processed before a response from the ajax call is received and your success function is processed.

To use this value outside of the ajax call, the variable could be defined outside the scope of this function, and the success function could be used to set it.

var value;

$(function(event) {
            $.ajax({
                type: "GET",
                url: "get.php",
                data: {value: "like"},
                success: function(data) {
                    value = data;
                    alert(value);  //first time alert shows "23"
                    // Call function here to use newly set value
                }
            });
        });

this is not an answer. You need to provide a solution to this problem. — Shoaib Shakeel, Apr 08 '15 at 05:00

score 0 · Answer 3 · answered Apr 08 '15 at 05:05

Look into resolving promises with $.when in jQuery: https://api.jquery.com/jquery.when/

Because your request is asynchronous, your variable is being set before the response. If you use when/then, you can tell your application "When you're FINISHED with this ajax call, set my variable."

score 0 · Answer 4 · answered Apr 08 '15 at 05:08

ajax call is asynchronous so your code will not wait for it to finish and execute next statements without response from server. Which is resulting in an undefined return. You need to either use a callback function or jquery promise to execute response dependent code after response has arrived. You can refactor your code like this:

function main() {
  // some code

  ajaxRefresh(url); // ajax call 
}

// code to run after ajax response is arrived
function doSomething(data) {
  alert(data);
}

// perform you ajax call here
function ajaxRefresh(actionUrl) {
  $.ajax({
         url: actionUrl,
         success: function(data) {
           doSomething(data); // or false as appropriate
         }});
}

Is it possible to store a value returned from the server by jQuery.ajax( )?

4 Answers4