Question

我正在尝试从本地myjson.json文件读取并将其内容打印到我的index.html。我正在使用以下JavaScript代码：

function getJSON() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/myfolder/myjson.json', false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
        var response = xhr.responseText;
        console.log("response: " + response); //Correctly prints JSON content to console
        return response; //response is undefined when called from html
        }
    }
    xhr.send(null);
}

我正在像这样调用函数getJSON（）：

document.getElementById("contentOfJSON").innerHTML += "JSON: "+getJSON();

这将myjson.json的内容正确打印到console.log，但是我的HTML元素“ contentOfJSON”仅包含“ JSON：undefined”。为什么即使console.log工作正常，我仍然得到未定义的响应？

Answer 1

您正在将字符串返回到onreadystatechange上的调用。

您的函数getJSON不返回任何内容。

从我所看到的情况来看，同步应该被贬值了，因此只需将成功函数传递给getJSON然后通过将结果字符串传递给回调函数来使其异步即可。

function getJSON(mycallback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/myfolder/myjson.json', false);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE) {
        var response = xhr.responseText;
        console.log("response: " + response); //Correctly prints JSON content to console

        // call it here
        mycallback(response);
        }
    }
    xhr.send(null);
}


getJSON(function(result)
{
    document.getElementById("contentOfJSON").innerHTML += "JSON: " + result;
});

XMLHttpRequest返回未定义的响应，但可以在console.log上使用

1 个答案: