JavaScript读取本地json文件方式

最新推荐文章于 2024-08-16 16:27:09 发布

qq_44687755

最新推荐文章于 2024-08-16 16:27:09 发布

阅读量7.8k

点赞数 2

本文链接：https://blog.youkuaiyun.com/qq_44687755/article/details/98966331

版权

本文介绍了使用jQuery和D3.js两种方法来读取本地JSON文件，并将其数据应用于JavaScript代码中。通过$.get()和d3.json()函数，可以轻松地将本地文件authors.json的数据加载到变量中。

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

JavaScript读取本地文件方式：

假如有本地文件：authors.json

内容为:

[
{
  "name": "Kwan-Liu Ma",
  "num": 356
}, 
{
  "name": "Huamin Qu",
  "num": 241
}, 
{
  "name": "Wei Chen",
  "num": 585
}, 
{
  "name": "Shixia Liu",
  "num": 120
}, 
{
  "name": "Xiaoru Yuan",
  "num": 120
},
{
  "name": "Yingcai Wu",
  "num": 91
}
]

目前已掌握两种方式读进代码里：

1、引入jQuery

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

$.get('./authors.json', function (data) {

//读进了data变量中
//接下来用到data的代码必须全部在此函数内部进行

})

2、本人学过D3.js库，里面有一个函数可将文件读进代码

引入d3.js

<script src="http://d3js.org/d3.v3.js"></script>

d3.json("authors.json", function(error, authordata) {
   if(error) console.error(error);
    //读进了authordata变量
    //接下来用到authordata的代码必须全部在此函数内部进行

});