HTML/JavaScript中引入json文件

最凶残的小海豹

已于 2022-08-29 10:51:38 修改

阅读量2.9w

点赞数 5

分类专栏： web前端文章标签： json javascript 前端

于 2022-05-06 10:01:52 首次发布

本文链接：https://blog.csdn.net/qq_17627195/article/details/124602809

版权

web前端专栏收录该内容

206 篇文章

订阅专栏

本文介绍了两种在HTML中引入和解析JSON数据的方法。方法一是通过<script>标签直接引入，尽管某些IDE可能报错，但依然能正常工作。方法二是利用jQuery的getJSON异步获取JSON文件，需要注意的是这种方法需要启动服务以避免跨域问题。这两种方式为网页动态加载和展示JSON数据提供了便利。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：通过`<script >`标签引入

第一步：在json文件中定义一个变量指向json数据（一些IDE会报错，不过不用管，另外一些IDE规则验证无法通过，导致无法保存，这种情况就用第二种方法吧）。

var jsonData = {
	// json数据
};

第二步：在HTML文件中使用<script>标签引入json文件

<script type="text/javascript" src="./xxx.json"></script>
<script>
// 控制台输出json
console.log("json文件数据", jsonData);
</script>

方法二：通过异步获取json（`getJSON`）

要引入JQuery
要启动服务（我用的http-server），否则出现跨域报错
注意json文件不能像方法一那样写了，是纯json文件，不要赋值变量了

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.getJSON('data.json', function (data) {
    console.log("json文件数据", data);
})
</script>