Question

当它来自外部文件时，我似乎无法获得JSON。当我内联写它时，它工作正常。但是当我创建一个名为test.json的文件并将JSON复制到其中时，我从未获得内容。

这是我的HTML和JavaScript。我应该注意HTML和JSON文件都在同一个文件夹中。

我做错了什么？

<!DOCTYPE html>
<html>
    <head>
        <title>JSON Sandbox</title>
    </head>
    <body>
        <h2>JSON Sandbox</h2>

        <p id="demo"></p>

        <script type="text/javascript">
            var text = $.getJSON({
                dataType : "json",
                url : "test.json",
                data : data,
                success : window.alert("JSON Aquired.")

            });

            var obj = JSON.parse(text);
            document.getElementById("demo").innerHTML = obj.name + "<br>" + obj.street + "<br>" + obj.phone;
        </script>

    </body>
</html>

这是我的test.json文件

{
    "name":"John Johnson",
    "street":"Oslo West 1",
    "phone":"111 1234567"
}

Answer 1

将文件扩展名更改为js。并更改html文件，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>JSON Sandbox</title>
        <script src="jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <h2>JSON Sandbox</h2>

        <p id="demo"></p>

        <script type="text/javascript">
            var obj = new Object();
            var error = new Object();
            $.getJSON('test.js').done(function (data) {
                obj = data;
                document.getElementById("demo").innerHTML = obj.name + "<br>" + obj.street + "<br>" + obj.phone;
            }).error(function (err) {
                error = err;
            });

        </script>
    </body>
</html>

Answer 2

您的成功处理程序定义不正确。

替换：

success : window.alert("JSON Aquired.")

使用：

success : function(data){
    window.alert("JSON Aquired.")
    // `data` is the returned object:
    document.getElementById("demo").innerHTML = data.name + "<br>" + data.street + "<br>" + data.phone;
}

您需要在success处理程序中执行您想要对数据执行的操作，因为$.getJSON是一个AJAX调用，这意味着它是异步的。

加载外部JSON文件

2 个答案: