jQuery: Return data after success AJAX call

Using a callback:

The only way to return the data from the function would be to make a synchronous call instead of an asynchronous call, but that would freeze up the browser while it’s waiting for the response.

You can pass in a callback function that handles the result:

1
2
3
4
5
6
7
8
9
 
function testAjax(handleData) {
  $.ajax({
    url:"getvalue.php",  
    success:function(data) {
      handleData(data); 
    }
  });
}

Call it like this:

1
2
3
4
5
6
 
testAjax(function(output){
  // here you use the output
});
// Note: the call won't wait for the result,
// so it will continue with the code here while waiting.

Using a promise:

You can’t return anything from a function that is asynchronous. What you can return is a promise.

1
2
3
4
5
6
7
8
9
 
function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

// get your promise like this
var promise = testAjax();

You can store your promise, you can pass it around, you can use it as an argument in function calls and you can return it from functions, but when you finally want to use your data that is returned by the AJAX call, you have to do it like this:

1
2
3
4
 
promise.success(function (data) {
  alert(data);
});

Source Stack Overflow