getJSON不获取数据

getJSON not fetching data

本文关键字：数据 获取 getJSON      更新时间：2023-09-26

我下面的代码不是从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"}

我犯了一个简单的错误吗?

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

中
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包含默认值。它将请求发送到服务器并在不等待结果的情况下继续方法流。

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

$.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
}

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

如果你把代码放在ajax回调的下面，它会工作得很好。

你必须把你的代码放在回调中，否则你不会有文本变量填充:

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;
    });
}
相关文章：