方法一：通过getJSON实现

 

　　getJSON是jquery提供的读取json格式文件的方法

 

　　首先我们将html中引入jquery,可以通过百度CDN引入，代码如下：

 

　　然后就可以在script中使用getJSON，getJSON代码格式如下：

 

　　$.getJSON("userinfo.json", function(data) {

 

　　//data 代表读取到的json中的数据

 

　　});

 

　　参考示例：

 

　　第一步：创建一个json格式文件，取名为userinfo.json

 

　　[

 

　　{

 

　　"name": "张三",

 

　　"sex": "男"

 

　　},

 

　　{

 

　　"name": "李四",

 

　　"sex": "男"

 

　　},

 

　　{

 

　　"name": "王五",

 

　　"sex": "女"

 

　　}

 

　　]

 

　　第二步创建一个html文件(同json路径下)，取名为index.html

 

　　使用jquery读取json格式文件

 

　　//监听按钮点击事件

 

　　$("#btn").click(function() {

 

　　//使用getJSON读取userinfo.json文件中的数据

 

　　$.getJSON("userinfo.json", function(data) {

 

　　console.log(data);

 

　　//获取jsonTip的div

 

　　var $jsontip=$("#jsonTip");

 

　　//存储数据的变量

 

　　var strHtml="123";

 

　　//清空内容

 

　　$jsontip.empty();

 

　　//将获取到的json格式数据遍历到div中

 

　　$.each(data, function(infoIndex, info) {

 

　　strHtml +="姓名：" + info["name"] + "

 

　　";

 

　　strHtml +="性别：" + info["sex"] + "

 

　　";

 

　　strHtml +="

 

　　"

 

　　})

 

　　//显示处理后的数据

 

　　$jsontip.html(strHtml);

 

　　})

 

　　})

 

　　方法二：使用原生js实现

 

　　参考示例代码：

 

　　使用上面已经创建的json文件

 

　　将html文件修改

 

　　使用jquery读取json格式文件

 

　　//监听按钮点击事件

 

　　$("#btn").click(function() {

 

　　// 同文件夹下的json文件路径

 

　　var url="userinfo.json"

 

　　// 申明一个XMLHttpRequest

 

　　var request=new XMLHttpRequest();

 

　　// 设置请求方法与路径

 

　　request.open("get", url);

 

　　// 不发送数据到服务器

 

　　request.send(null);

 

　　//XHR对象获取到返回信息后执行

 

　　request.onload=function () {

 

　　// 返回状态为200，即为数据获取成功