How to use ajax success return variable?

Question

I have 2 functions with ajax call. How can i use the variables in function2 that return in function1.

function func1 (){
  $.ajax({
      url:"",
      dataType: 'json',
      success: function(data){
          var foo
      }
  });  
  //How can i use var foo in func2(foo)?
  //i try .done(func2(foo)); but it returns foo is not define
}

    function func2 (param){
       $.ajax({
         url:"",
         dataType: 'json',
         success: function(data){
       }
     });
     }

score 4 · Answer 1 · answered Sep 22 '12 at 18:08

    function func1 (){
      var foo;
      $.ajax({
          url:"",
          dataType: 'json',
          async: false,
          success: function(data){
              foo = ...
          }
      });  
      func2(foo)
    }

You should set async to false, or you can execute func2 in success handler.

score 1 · Accepted Answer · edited May 23 '17 at 12:18

You must set the variable foo globally, and async to false, so the browser can wait to execute func1 before executing func2:

var foo;
function func1 (){
  $.ajax({
      url:"",
      dataType: 'json',
      async: false,
      success: function(data){
          foo = ...
      }
  });  
  //How can i use var foo in func2(foo)?
  //i try .done(func2(foo)); but it returns foo is not define
}

function func2 (param){
   $.ajax({
     url:"",
     dataType: 'json',
     success: function(data){
         alert(foo)
   }
 });
 }

You could also have done it without initializing the var, as said by Ozerich; but is a good practice to have all your variables initialized.

Remember that if you initialize again the variable inside the success callback (using var foo again) you will be referring to a new variable named foo instead of the globally one.

You can know more about javascript variable scopes searching the web.. https://stackoverflow.com/a/500459/407456

btw, you should consider executing your func2 inside the success callback of the func1.

Thanks, you have better explanation. How about if i use .done(func2(foo)); do i still need to set async:false? — vzhen, Sep 22 '12 at 18:25
Sure, it should work too. I've never used `.done` before, but as I can see on the [jquery api](http://api.jquery.com/deferred.done/) it should work as calling the method inside the success callback. — elboletaire, Sep 23 '12 at 19:44

thecodeparadox · Answer 3 · 2012-09-22T18:22:35.067

Just call func2() withing func1() AJAX success function:

function func1() {
    $.ajax({
        url: "",
        dataType: 'json',
        success: function(data) {
            var foo = data;
            func2(foo);
        }
    });
}

function func2(param) {
    $.ajax({
        url: "",
        dataType: 'json',
        success: function(data) {}
    });
}

OR

You can use callback function like below:

function func1(callback) {
    $.ajax({
        url: "",
        dataType: 'json',
        success: function(data) {
            var foo = data;

            // pass foo variable
            // as callback parameter
            callback(foo);
        }
    });
}

function func2(param) {

    // here call func1() with a
    // callback function argument

    func1(function(foo) {
      $.ajax({
        url: "",
        dataType: 'json',
        success: function(data) {}
      });
   });
}

According to jQuery doc about `async` of $.ajax()

As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the complete/success/error callbacks.

score 0 · Answer 4 · answered Sep 22 '12 at 18:17

I am not sure what it is exactly that you want to accomplish.

If you want to wait with the second ajax call before the first, you should use async: false in the ajax options, or use a callback:

function func1 (callback){
  $.ajax({
      url:"",
      dataType: 'json',
      success: function(data){
          var foo;
          if (typeof callback != 'undefined')
              callback(foo);
      }
  });  
}


function func2 (param){
   $.ajax({
     url:"",
     dataType: 'json',
     success: function(data){
   });
 }

func1(func2);

if you want however to have both ajax calls in parallel, but the second function should wait for the result of the first function before some code block, you would need to define callbacks in both functions to a third function which checks if all data is downloaded yet and only then executes the code.

How to use ajax success return variable?

4 Answers4

According to jQuery doc about async of $.ajax()

According to jQuery doc about `async` of $.ajax()