前期准备:

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

2.一台能开机的电脑

一、ajax(XMLHttpRequest):

// index.json文件

{

"data": {

"list": [

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

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

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

]

}

}

html代码如下:

加载json

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

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

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

// 推荐cdn地址

html代码如下:

加载json

运行结果:

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

注意: 这里需要jquery库

html代码如下: 

加载json

运行结果:

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

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

加载json

运行结果:

 

参考链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: