JS动态加载JSON文件并读取数据
Posted lfq761204
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS动态加载JSON文件并读取数据相关的知识，希望对你有一定的参考价值。
JSON(javascript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它采用纯文本格式来存储和表示数据，层次结构简洁和清晰，是理想的数据交换语言。JSON类似 XML，比 XML 更小、更快，更易解析。
关键词：动态加载JSON文件、读取JSON文件数据
demo.json文件内容
var json="item1":"string","item2":["var1","var2","var3"]这其实不是一个标准格式的json文件，而是在文件中自定义一个名为”json“的变量指向json数据，这里的”json“变量名可以在js代码块中直接使用。
test.html文件代码
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//动态创建一个“script”元素
var script = document.createElement("script");
script.type = "text/javascript";
//设置创建的“script”元素的src属性
script.src = "demo.json";
//将“script”元素加载到页面中
document.getElementsByTagName("head")[0].appendChild(script);
//动态创建对象是异步执行的，所以必须要等到加载完成才能使用文件中的数据
window.onload = function ()
//这里的变量json出自JSON文件，不需要定义，可以直接使用
console.log(json);
//在页面上分行显示“string”和“var2”
document.write(json.item1 + "<br />" + json.item2[1]);
</script>
</head>
<body>
</body>
</html>将以上两个文件放在同一目录下即可，edge浏览器测试成功。
以上是关于JS动态加载JSON文件并读取数据的主要内容，如果未能解决你的问题，请参考以下文章