前端 如何使用js(jQuery)加载json？

前期准备：

1.网站开发工具(这里以HBuilderX为例)

2.一台能开机的电脑

一、ajax（XMLHttpRequest）:

// index.json文件

{

"data": {

"list": [

{"name": "数据表1", "id": "1"},

{"name": "数据表2", "id": "2"},

{"name": "数据表3", "id": "3"}

]

}

}

html代码如下：

这里采用的是js里ajax的异步加载，创建XMLHttpRequest参数之后通过这个属性读取json文件，最后使用JSON.parse把读取到的JSON文件转化为json数据通过控制台输出。

 二、$.ajax()(Jquery)加载: 

注意：使用此方法之前需要引入jquery库

// 推荐cdn地址

html代码如下：

运行结果:

 三、$.getJSON()(jquery)加载：

注意: 这里需要jquery库

html代码如下： 

运行结果：

 那么我们写了这么多导入JSON的方法，那如何将数据显示出来呢？

具体代码如下: （这里以第二种方法为例）

运行结果：

参考链接

 您阅读本篇文章共花了： 

大家都在找：

jquery：jquery库

json：json文件怎么创建

前端：前端和后端的区别