Javascript 加载外部JSON文件_Javascript_Jquery_Json

Javascript 加载外部JSON文件

javascript jquery json

Javascript 加载外部JSON文件,javascript,jquery,json,Javascript,Jquery,Json,我似乎无法从外部文件获取JSON。当我内联编写它时，它工作得很好。但是，当我创建了一个名为test.json的文件并将json复制到其中时，我从未获得内容这是我的HTML和JavaScript。我应该注意，HTML和JSON文件都在同一个文件夹中我做错了什么 <!DOCTYPE html> <html> <head> <title>JSON Sandbox</title> </head>

我似乎无法从外部文件获取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>

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

替换：

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

与：

成功：函数（数据）{
警报（“JSON已获取”）
//`data`是返回的对象：
document.getElementById（“demo”）.innerHTML=data.name+“
”+data.street+“
”+data.phone；
}

您需要在

success

处理程序中处理数据，因为

$.getJSON

是一个AJAX调用，这意味着它是异步的。

将文件扩展名更改为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>


JSON沙盒
JSON沙盒

var obj=新对象（）；
var error=新对象（）；
$.getJSON（'test.js'）.done（函数（数据）{
obj=数据；
document.getElementById（“demo”）.innerHTML=obj.name+“
”+obj.street+“
”+obj.phone；
}).error（函数（err）{
错误=错误；
});

尝试检查：在

*.json

文件中创建一个

*.js

文件。请不要将答案编辑到您的问题中。这样做不行。谢谢。您还必须将使用数据的代码移动到成功处理程序中。@RyanKinal:刚刚注意到，将其添加到我的答案中。@Frantumn:您有任何错误吗？在成功处理程序中

console.log（data）

时，您会看到什么？未捕获引用错误：$未定义。这在var文本行上。请确保已正确包含jQuery。仍然无法工作，您可以在尝试将googleapis js文件下载到本地文件夹并引用它时查看它，因为绝对没有理由在代码之后在这个答案中提出任何建议。我不知道发生了什么事，但我想这是我的荣幸。

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

<!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>