Question

我有两个JavaScript函数。一个人从一个php文件中获取JSON数据。

{"company_name":"","job_title":"Superhero","unix_time_convert":"Posted 06th of September '18","link":"2"}

返回JSON的javascript函数是这样的：

function assignJsonData() {
 var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var data = (this.response);
            return data;
            //alert( data );
       }
    };   
    xmlhttp.open("GET", 'test_echo.php?row=1', true);
    xmlhttp.send();      
}

请注意，alert( data );将在一个框中返回JSON数据。

但是当我将函数分配给其他地方的变量时，它返回的是未定义的。

window.onload = function () {
    var data = assignJsonData();
    alert(data);

}

我在这里想念什么？

抱歉，我已经花了几个小时了……

谢谢

安迪

Answer 1

您应该使用callBack从ajax请求中检索数据，并在ajax请求结束后获取数据，看起来应该像这样：

function assignJsonData(callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            callback(this.response);
       }
    };   
    xmlhttp.open("GET", 'test_echo.php?row=1', true);
    xmlhttp.send();      
}
window.onload = function () {
    assignJsonData(function(data){
        alert(data);
    });
}

Answer 2

XMLHttpRequest是异步的。您需要使用回调或Promise。

function assignJsonData(callback) {
 var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var data = this.response
            callback(data)
       }
    };   
    xmlhttp.open("GET", 'test_echo.php?row=1', true);
    xmlhttp.send();      
}

window.onload = function () {
    assignJsonData(function(data) {
      alert(data)
    });
}

Answer 3

正如Jafar指出的，您应该使用回调！

如果要检查事物执行的顺序，请运行下面的代码。

var returnData = "";

function assignJsonData() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        console.log(this.readyState, this.status);
        if (this.readyState == 4 && this.status == 200) {
            returnData = this.response;
            console.log('enter');
            //console.log(this.response);
            //return data;
            //alert( data );
       }
    };   
    xmlhttp.open("GET", 'https://jsonplaceholder.typicode.com/todos/1', true);
    xmlhttp.send();      
}

assignJsonData();
console.log("returnData: " + returnData);

Answer 4

您需要使用Promise。检查-How do I promisify native XHR?

您没有警报中的数据，因为我想响应尚未准备好。

Javascript不返回AJAX数据（JSON，PHP，AJAX）

4 个答案: