Question

下面的代码不是从data.js获取数据当JSON数据硬编码到页面中时，页面工作正常。

<head>
    <title>Test Page</title>
    <script>
    function jsontest() {
        var text;
        $.getJSON("data.js", function(result) {
            text = result;
        });
        var obj = JSON.parse(text);
        document.getElementById("content").innerHTML =
        obj.name + "<br>" +
        obj.street + "<br>" +
        obj.phone;
    }
    </script>
</head>
<body onload="jsontest();">
    <h1>Testing Page</h1>
    <p id="content"></p>
</body>

我的数据看起来像这样

{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}

我是否犯了一个简单的错误？

Answer 1

我注意到的第一件事是您在同步模式下使用getJSON。这不起作用，因为它是异步执行的。您需要将逻辑置于完成处理程序

中

function jsontest() {
    var text;
    $.getJSON("data.js", function(result) {
        text = result;
        var obj = JSON.parse(text);
        document.getElementById("content").innerHTML =
        obj.name + "<br>" +
        obj.street + "<br>" +
        obj.phone;          
    });
}

在您的代码中，当您执行

时

var obj = JSON.parse(text);

方法getJSon尚未返回，因此text包含默认值。它将请求发送到服务器并继续方法流而不等待结果。

这就是处理程序的用途：放置在请求完成时需要执行的逻辑。

Answer 2

$.getJSON是异步调用 - 因此当您尝试在回调之外运行JSON.parse时，由于呼叫仍在进行中，因此无法正常工作。将代码移至回调中，您就会变得更好：

function jsontest() {
    $.getJSON("data.js", function(result) {
        var text = result;

        var obj = JSON.parse(text);
        document.getElementById("content").innerHTML =
          obj.name + "<br>" +
          obj.street + "<br>" +
          obj.phone;
    }); 
    //Anything after the `getJSON` call is executed immediately. 
    //$.getJSON is still in progress when these lines are executing
}

Answer 3

Javascript是单线程且无阻塞的，因此，在执行ajax调用时，程序计数器将继续。因此将解析未定义的内容。

如果你把代码置于ajax回调中，那么它就可以了。

Answer 4

您必须将代码放在回调中，否则您将不会填充文本var：

function jsontest() {
    var text;
    $.getJSON("data.js", function(result) {
        text = result;
        var obj = JSON.parse(text);
        document.getElementById("content").innerHTML =
        obj.name + "<br>" +
        obj.street + "<br>" +
        obj.phone;
    });

}

getJSON没有获取数据

4 个答案: