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

lfq761204

8009人浏览 · 2022-01-06 22:27:17

lfq761204 · 2022-01-06 22:27:17 发布

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