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文件并读取数据的主要内容,如果未能解决你的问题,请参考以下文章

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

vite2 读取json文件的几种方法

如何在openlayers中加载json数据?

js加载json数据成表格

HTML5怎么读取json文件

将抽象数据类型保存和加载到 json 文件并从游戏中的文件中读取 Haskell