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

    原文作者:lfq761204
    原文地址: https://blog.csdn.net/lfq761204/article/details/122353070
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞