当前位置：
首页 >
前端技术
> javascript
>内容正文
javascript
JS动态加载JSON文件并读取数据
生活随笔
收集整理的这篇文章主要介绍了
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文件并读取数据的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： Google开发者模式调试css样式的方
- 下一篇： 在线编程JavaScript