Question

我是一个在简单的前端项目中测试getJSON的初学者。我已经了解到我无法使用之前使用的文件：// URL前缀，并且必须模拟服务器（这是正确的吗？）。我通过在项目目录中输入 python3 -m http.server 8000 到终端（OS X）中来利用Python的内置服务器功能。

我现在可以在浏览器中输入http://0.0.0.0:8000/，它会加载我的index.html。我还有另外两个文件：app.js和aceOfSpades.json，它们位于一个名为javascripts的文件夹中，与index.html位于同一级别。

加载index.html时，控制台中显示的唯一值是＆＃34; hello world＆＃34; 。这告诉我app.js正在被正确加载，但getJSON函数是（1）没有看到aceOfSpades.json文件，（2）正在查看文件但没有将其对象放入＆＃34;卡＆＃34 ;参数，或（3）可能会被我的Python内置服务器搞砸。也许它完全是别的东西。

当我查看＆＃34;来源＆＃34; Chrome开发人员面板的标签，javascripts文件夹中列出的唯一文件是app.js. aceOfSpades.json无处可寻！

我的问题：为什么我的JSON对象不会在给定以下代码的情况下打印到控制台？我怎么解决这个问题？谢谢。

的index.html ：

<!doctype html>
<html>
    <body>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script src="javascripts/app.js"></script>
    </body>
</html>

app.js ：

var main = function () {
    "use strict";

    $.getJSON("/javascripts/aceOfSpades.json", function (card) {
        console.log("your card should appear after this");
        console.log(card);
    });

    console.log("hello world");
};

$(document).ready(main);

aceOfSpades.json ：

{
    rank: "ace",
    suit: "spades"
}

Answer 1

可能是因为您的属性未被引号括起，导致JSON无效。

{
    "rank": "ace",
    "suit": "spades"
}

来自jQuery Docs（强调补充）：

重要提示：从jQuery 1.4开始，如果JSON文件包含语法错误，则请求通常会以静默方式失败。出于这个原因，避免频繁手动编辑JSON数据。 JSON是一种数据交换格式，其语法规则比JavaScript的对象文字符号更严格。 例如，JSON中表示的所有字符串，无论是属性还是值，都必须用双引号括起来。有关JSON格式的详细信息，请参阅http://json.org/。

Answer 2

Javascript在客户端运行，除非the browser supports it，否则无法加载本地文件。

$.getJSON("/javascripts/aceOfSpades.json", function (card) {
        console.log("your card should appear after this");
        console.log(card);
});

尝试：

$.getJSON("http://0.0.0.0:8000/javascripts/aceOfSpades.json", function (card) {
        console.log("your card should appear after this");
        console.log(card);
});

getJSON对象没有出现在console.log中

2 个答案: