Question

我有一些带有'application / json'类型的脚本标记的html文件，我试图在我的javascript代码上读取json，这是在单独的文件上并加载到该html。但我只能找到jQuery的例子，我想用纯粹的javascript来做。

以下是关于jquery的示例：

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

我的代码：

<script src="Game.js"></script>
<script type="application/json" id="data">
{'name':'foo'}
</script>

Javascript代码：

var json_file = JSON.parse(document.getElementById('data'));

Answer 1

你的脚本找不到json，因为当js脚本运行时json不在那里，把json标签放在javascript脚本标签之前。另外，你在那里有json不是（有效）json。 json有"，而不是'。

所以

<script type="application/json" id="data">
    {"name":"foo"}
</script>
<script src="Game.js"></script>

如果您有类似

的内容，可以使用

JSON.parse(document.getElementById('data').innerHTML)

Game.js中的

。

Answer 2

如果您想在JSON元素中嵌入html，可以使用Element.dataset

window.onload = function() {
  console.log(JSON.parse(document.getElementById("myJson").dataset.json))
}

<script id="myJson" type="text/plain" data-json='{"name":"Foo"}'></script>

如何从html标记中读取和解析json文件

2 个答案: