无法在 html 页面中使用 $.getJSON答案

【问题标题】：Unable to use $.getJSON in html page无法在 html 页面中使用 $.getJSON
【发布时间】：2018-08-04 01:51:55
【问题描述】：

这似乎是一个非常菜鸟的问题，但是下面的这个 HTML 页面是否有任何原因不起作用？它只是加载一个空白页面。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

</head>

<body>

<div id="mypanel"></div>

<script>
    $.getJSON(
        "Data.txt",
        function (data) {
            var template = "<h1>{{ name }}</h1>";
            var html = Mustache.to_html(template, data);
            $('#mypanel').html(html);
        }
    );
</script>

</body>
</html>

另外，正如我刚刚学习的那样，“Data.txt”文件与 HTML 文件位于同一目录中，并且仅包含以下文本：

{ name: "John" }

非常感谢您对此的任何帮助！

【问题讨论】：

尝试在 'name' 周围加上引号：{ "name": "John" }
@sideroxylon 感谢您的意见，我刚刚尝试过，但没有成功。
您是否检查过控制台以确认正在接收数据？
现在我在显示我的无知：你如何检查控制台？是使用 Chrome 上的开发者工具吗？
是 - 网络选项卡。它应该显示您的请求的响应。

标签： html getjson mustache

【解决方案1】：

我会将数据文件重命名为 Data.json

我成功地使用了这样的 fetch：

fetch('Data.json')
            .then(blob => blob.json())
            .then(data => {
            var template = "<h1>{{ name }}</h1>";
            var html = Mustache.to_html(template, data);
            $('#mypanel').html(html); 
            });

【讨论】：