Question

这似乎是一个非常noob的问题，但是有什么理由为什么下面这个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" }

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

Answer 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); 
            });

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

1 个答案: