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

最新推荐文章于 2024-04-21 22:15:16 发布

lfq761204

最新推荐文章于 2024-04-21 22:15:16 发布

阅读量7.3k

点赞数

分类专栏： JS 文章标签： json html javascript

本文链接：https://blog.csdn.net/lfq761204/article/details/122353070

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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浏览器测试成功。

lfq761204

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS动态加载JSON文件并读取数据

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它采用纯文本格式来存储和表示数据，层次结构简洁和清晰，是理想的数据交换语言。JSON类似 XML，比 XML 更小、更快，更易解析。关键词：动态加载JSON文件、读取JSON文件数据demo.json文件内容var json={"item1":"string","item2":["var1","var2","var3"]}这其实不是一个标准格式的json文件，而是在文件中自定义一
复制链接

扫一扫