why cant I return data from $.post (jquery)

Question

I must be making a silly mistake but I cannot return the data I get from a $.post function and store it in a variable, not only that, I cannot return ANYTHING from within th

Answer 1

You are using the more streamlined .post() method. This is both more finicky to work with (IMHO) and somewhat less powerful than the larger form, $.ajax().

Personally, I have found the .ajax() method to be preferable because the added structure makes it easier to format. Also, you can do more with .ajax (there are more options, such as turning off asynch which is sometimes very useful when you want to delay processing until the data has been returned).

Here is a simple example of using the full $.ajax() method. Note the success function at the bottom -- that is where you can use the data sent back from the other PHP file!

Answer 2

$.post is a asynchronous function. The control from function will immediately return after it run post but the response from post may be received later.

So what you can do is instead of return, use a call back function and define callback function outside.

say,

function test(){

  $.post("demo_test_post.asp",
    {
      name:"Donald Duck",
      city:"Duckburg"
    },
    function(data,status){
      my_function(data)
    });

}

function my_function(data){
  // you can operate on data here
}

Answer 3

A jQuery post() is by default Asynchronous meaning that you can never return a value from a function like this.

To Quote the jQuery Docs

async (default: true)

Type: Boolean

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.

You would need to provide a callback function in order to update the value.

e.g. A very basic example.

var foo;
test();    

function test(){    
    $.post("demo_test_post.asp",
        {
          name:"Donald Duck",
          city:"Duckburg"
        },
        function(data,status){

          var bar = "bar"
          foo = bar; // assign foo

        });    
    }    
}

Alternatively you can look at changing your jQuery Ajax to be Synchronous. Take a look at this post here How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

Answer 4

You don't return anything from post(). What you have inside function(data, status) {} is actually a callback and doesn't return a result to the post() method like you think.

Have a read of the this article for more information

Answer 5

Try using the .done() to execute the returned data. This should ensure that it gets the data and doesn't set your variable or alert data before it finishes.

$.post("demo_test_post.asp", { name: "Donald Duck", city: "Duckburg" })
.done(function(data) {
  alert("Data Loaded: " + data);
  //Or return data;
});

Answer 6

jQuery AJAX requests are made asynchronously, meaning that the request is started and the $.post() method returns more or less immediately. The request is processed by the browser in the background. When the request is completed, jQuery calls the callback function you supplied to $.post(). You can use async: false to tell jQuery to block until the request completes, but this is not recommended as it will almost certainly result in terrible performance and a poor user experience.

What you should do instead is write your code such that the logic that depends on the AJAX response is kicked off by your callback function. Something like:

function handleAjaxResponse(responseData) {
  // do something with the response.
}

function doAjax() {

  $.post("demo_test_post.asp",
    {
      name:"Donald Duck",
      city:"Duckburg"
    },
    function(data, status){
      handleAjaxResponse(data);
    });

}

doAjax();