getJSON 对象未出现在 console.log 中答案

【问题标题】：getJSON object not appearing in console.loggetJSON 对象未出现在 console.log 中
【发布时间】：2016-07-01 13:54:58
【问题描述】：

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

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

加载 index.html 时，控制台中显示的唯一值是“hello world”。这告诉我 app.js 正在正确加载，但 getJSON 函数是（1）没有看到 aceOfSpades.json 文件，（2）看到文件但没有将其对象放入“card”参数中，或者（ 3) 可能会陷入我的 Python 内置服务器。也许这完全是另外一回事。

当我查看 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"
}

【问题讨论】：

你至少在控制台中得到""你的卡片应该出现在这个之后""吗？这是相对重要的信息。
不，唯一出现的是“hello world”
然后添加一个错误处理程序。它可能会告诉你“parseerror”。 parseerror 是什么意思？
我熟悉 Python 中的错误处理，但不熟悉 JavaScript。我应该尝试实现 try/catch/throw 吗？
由于这是一个返回 jqXHR 的 jQuery ajax 方法，您可以使用 .fail 方法。 .fail(function (jqXHR, textstatus, message) {/* log all three */});api.jquery.com

标签： javascript jquery html json

【解决方案1】：

可能是因为你的属性没有用引号引起来，导致 JSON 无效。

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

来自jQuery Docs（已添加重点）：

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

【讨论】：

尴尬！这解决了我的问题。希望这将提醒其他新手，细节可以决定成败！谢谢
专业提示：每当您手动创建 JSON 文件时，请使用 JSON Lint/Validation 工具来验证 JSON 的格式是否正确。
更好的是，不要手动构建 json。如果你仍然这样做，请使用一个会为你整理它的编辑器，比如 atom。

【解决方案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);
});

【讨论】：

幸运的是，他似乎没有尝试加载本地文件。在服务器上查看 html 文件时，相对路径 /foo/bar http://0.0.0.0:8000/ 将指向服务器。
但是javascript在客户端运行，然后当代码执行时它会尝试在本地路径上搜索（例如在客户端的机器上）
嘿，谢谢您的回答！原来我只是忘记了 JSON 对象中的引号。我把它写成一个普通的 JavaScript 对象。菜鸟错误！
对不起，你错了。如果您在http://foobar.com/index.html，<a href="/foobar.html"> 会将您发送至http://foobar.com/foobar.html。 getJSON 也会发生同样的事情。在这两种情况下，路径都会发生在客户端中。
如果您从本地文件系统加载 html 文件（例如，通过在文件资源管理器中双击它），那么 Ajax 对具有相对路径 URL 的文件的调用也可以加载本地文件。但这并不适用，因为 OP 使用的是 Web 服务器。