方法一：通过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，即为数据获取成功
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery