1 首先建一个json文件,[
{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@123.com"
},
{
"name":"张铁林",
"sex":"男",
"email":"zhangtieli@123.com"
},
{
"name":"邓婕",
"sex":"女",
"email":"zhenjie@123.com"
}
]
2 其次建一个getUserinfo.html页面用于获取JSON文件里的用户信息数据,并显示
getJSON获取数据#divframe {
border: 1px solid #999;
width: 500px;
margin: 0 auto;
}
.loadTitle {
background: #CCC;
height: 30px;
}
$(function () {
$("#btn").click(function () {
$.getJSON("js/userinfo.json", function (data) {
var $jsontip = $("#jsonTip");
var strHtml = "读取的数据:
";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data, function (haha, info) {
strHtml += "姓名:" + info["name"] + "
";
strHtml += "性别:" + info["sex"] + "
";
strHtml += "邮箱:" + info["email"] + "
";
strHtml += "
"
})
$jsontip.html(strHtml);//显示处理后的数据
})
})
})
3 运行效果如下
用浏览器打开getUserinfo.html文件,显示
标签:jquery,info,读取,function,sex,strHtml,json,email,name
来源: https://www.cnblogs.com/mmore123/p/12981390.html