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文件并读取数据相关推荐

js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
php动态加载js,动态加载script文件的两种方法_javascript技巧
动态加载script到页面大约有俩方法第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...
python 爬虫+selenium 全自动化下载JS动态加载漫画
** python 爬虫+selenium 全自动化下载JS动态加载漫画最近刚学的python,代码可能并不规范,希望大家见谅! 爬取之前,我们首先需要做一些准备工作,因为很多网站都有反爬检索,为了 ...
HTML5动态加载资源方式,动态加载JavaScript文件的两种方法
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...
EasyUI datagrid动态加载json数据
最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...
JS动态加载脚本及对动态脚本内方法的调用
JS动态加载脚本及对动态脚本内方法的调用摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态添加脚本按需加载首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...
转：JS动态加载JS
JS动态加载JS 1.直接document.write <script language="javascript"> document.write("< ...
php 动态加载JavaScript文件或者css文件
1. 动态加载JS文件第一种方法: test.php <script language="JavaScript" src="test6.php?str=i lov ...
动态加载JavaScript文件
目录配置无脑方法! 逆袭之道! 一块蛋糕! 结论源代码 JavaScript文件的动态加载是您必须拥有的非常有用的工具之一.它允许您通过将阻止脚本从加载过程中移出(通常称为"延迟加载& ...
unity动态加载.obj文件相关
.obj文件加载相关 QA: 要点 .obj文件结构 .mtl文件结构材质匹配问题动态加载obj文件 unity资源商城插件:Runtime Obj Importer QA: q: 如何动态加载o ...

JS动态加载JSON文件并读取数据

关键词：动态加载JSON文件、读取JSON文件数据

demo.json文件内容

test.html文件代码

JS动态加载JSON文件并读取数据相关推荐

最新文章

热门文章