（HTML/H5）JS导入本地json文件数据的三类方法

qq_373027170

已于 2024-07-12 17:37:08 修改

阅读量1.5k

点赞数 3

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

于 2024-07-12 10:44:08 首次发布

本文链接：https://blog.csdn.net/qq_42850537/article/details/140371012

版权

1 篇文章 0 订阅

订阅专栏

这个本地json文件中往往保存一些（无需在js脚本中改动，又常需手动改动的一些各种设定之类的）静态数据。

使用fetch,XMLHttpRequest之类进行异步请求。

const jsnd=fetch('data.json')
.then(res=>res.json())
.then(data=>{console.log(data);return data})
.catch(err=>{console.log(err);})

相关json文件数据需严格遵循json语法（比如[]内的最后不应以逗号结尾——理论上不应该但实际写代码追加数据时还要回头给前面的数据加个逗号真的很烦）不然编辑器会报警（虽然运行时一般并不会有数据读取的问题，目前没碰到过）。

异步通讯可能有点废时，还需要有配套的(本地)webserver.

<!DOCTYPE html>
<html>
<head>
……
<script src="./data.json"></script>
</head>
<body >
……
</body>
</html>

相关data.json文件(可自行命名)写法会很不规范。需要在{}前加个“（全局）变量名=”：

dataJson={
    原json数据
}

把这个data.json文件后缀从.json改成.txt之类也能正常运转（相关的html中的src也相应地改后缀为txt,比如data.txt就行）。

也就是说这里注入的其实不是json数据，而是一段js代码;只是这段代码恰好定义了一个名为dataJson的object。

所以在相关js文件中导入/使用这个全局对象为json数据时（为求保险）宜加一个转换过程，如：

const jsnd=JSON.parse(JSON.stringify(dataJson));

或

const jsnd=JSON.parse(dataJson);

//JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。

这方法无需webserver,但需要三方文件相互适配。只能用在有html的场合。

如：

//文件名sj.js
const sj1={
……
……
……
}
const sj2={
……
……
……
}
export {sj1,sj2}

import {sj1,sj2} from './sj'

思路其实是方法2改良版。

无需webserver（异步通讯）,两方文件适配。不能再简了。

……实际测试发现，这个方法的html文件在本地文件系统打开时会触发跨域问题：Access to script at 'file:……' from origin 'null' has been blocked by CORS policy：……

最简单的解决办法还是配个（本地）服务器。这就又跟方法１没太大区别了。

要想不配这个（本地）服务器，还是得在方法２上改良：

<!DOCTYPE html>
<html>
<head>
……
<script type="text/javascript" src="./data.js"></script>
</head>
<body >
……
</body>
</html>

／／type="text/javascript"这一小段可省略。

跟方法２的差别是这里导入的是js文件/js代码段。里边的内容就是普通的js写法。比如

const jsnd={

//json数据

}
const jsnd2={

//json数据

}

上面这两json变量/对象相当于直接定义在全局（window?）中。可以在其它所有的js文件中使用。而且是直接拿来就用。

无需webserver,无需JSON.parse();Fetch;或是import之类。

非常方便。适合没有敏感数据，无需考虑安全问题的情况。

关注

专栏目录