如何使用return函数之外的Ajax POST调用中返回的数据？

Question

I have an Ajax POST call in jQuery that runs a PHP script and receives some data back. I want to be able to process that data outside the success function.

I have instantiated a global variable components , but this does not seem to have scope inside the success function.

After reading this I tried to call a function outside the AJAX call to assign the data to a global variable components_passed . This also does not work.

How can I get the data into a global variable? I could just call a function to do what I want to do, but I may want to access the data again.

// Function to try to receive data
var components_passed;
function pass_out(data) {
    components_passed = data;
}

var components = [];    // create empty array for component list
if ($('#area').val) {   // if area contains a value and isn't zero (i.e. an area has been selected)
$.post("/basic/get_area_components.php"
    ,{area: $("#area").val()}
    ,function(data){ components = JSON.parse(data);
        console.log(components);  // Show data in console - works
        pass_out(data);   // Call function to try and assign data to global variable
    });
}
console.log(components);  // Doesn't work - empty array

console.log(components_passed);  // Doesn't work - empty array

Answer 1

your missing a little concept: AJAX means Asynchronous.

think about what's happening in which order:

you declare variables, functions and so on..

then do the XHR request,

then log the variable components

then log components_passed

then nothing.

at a certain point after, the AJAX call will return, and then, and only then, your callback is executed, your returned data saved inside components_passed .

what you may want to do is wait for the call to return and then do whatever, for example logging. But at the moment console.log(components_passed) is called, the data has not been loaded yet; that's why your're printing an empty variable.

Answer 2

Asynchronous code can be tricky to deal with at first

You'll see, from the console.log statements the order in which things happen

function do_something(c) {
    // here, c is components
    // you can do things here with c
    console.log(4);
}

if ($('#area').val) {   // if area contains a value and isn't zero (i.e. an area has been selected)
    console.log(1);
    $.post("/basic/get_area_components.php", {area: $("#area").val()}, function(data){ 
        console.log(3); // this line is executed once $.post has retrieved the data
        var components = JSON.parse(data);

        // everything you need to do with components, you must do here, or in functions called from here

        do_something(components);

    });
    console.log(2); // as you can see, this line is executed before the callback
}