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

时间:2017-11-08 07:21:33

标签: javascript jquery ajax post global-variables

我在jQuery中有一个Ajax POST调用,它运行PHP脚本并接收一些数据。我希望能够在成功函数之外处理这些数据。

我已经实例化了一个全局变量components,但这似乎没有成功函数内的范围。

在阅读this之后,我试图在AJAX调用之外调用一个函数,将数据分配给全局变量components_passed。这也行不通。

如何将数据转换为全局变量?我可以调用一个函数来做我想做的事情,但我可能想再次访问数据。

// 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

2 个答案:

答案 0 :(得分:0)

你遗漏了一个小概念:AJAX表示异步。

考虑以什么顺序发生的事情:

你声明变量,函数等等。

然后执行XHR请求,

然后记录变量components

然后记录components_passed

然后什么也没有。

在某一点之后,AJAX调用将返回,然后,只有这样,您的回调才会被执行,您返回的数据保存在components_passed内。

您可能想要做的是等待调用返回然后执行任何操作,例如日志记录。但是在调用console.log(components_passed)时,数据尚未加载;这就是你打印一个空变量的原因。

答案 1 :(得分:0)

首先处理异步代码可能很棘手

您将从console.log语句中看到事情发生的顺序

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
}