json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取，具体示例代码如下，感兴趣的朋友可以参考下哈，希望可以帮助到你
$.getJSON(url,[data],[callback])
url：加载的页面地址
data: 可选项，发送到服务器的数据，格式是key/value
callback:可选项，加载成功后执行的回调函数
目录结构：
1.首先建一个JSON格式的文件userinfo.json 保存用户信息。
"name":"张国立"
,
"sex":"男"
,
"email":"
[email protected]"
"name":"张铁林"
,
"sex":"男"
,
"email":"
[email protected]"
"name":"邓婕"
,
"sex":"女"
,
"email":"
[email protected]"
2.其次建一个getUserinfo.html页面用于获取JSON文件里的用户信息数据，并显示
代码如下：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>getJSON获取数据</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style type="text/css">
#divframe {
border: 1px solid #999;
width: 500px;
margin: 0 auto;
.loadTitle {
background: #CCC;
height: 30px;
</style>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$.getJSON("js/userinfo.json", function (data) {
var $jsontip = $("#jsonTip");
var strHtml = "读取的数据：<br/>";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data, function (haha, info) {
strHtml += "姓名：" + info["name"] + "<br>";
strHtml += "性别：" + info["sex"] + "<br>";
strHtml += "邮箱：" + info["email"] + "<br>";
strHtml += "<hr>"
$jsontip.html(strHtml);//显示处理后的数据
</script>
</head>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="获取数据" id="btn"/>
</div>
<div id="jsonTip">
</div>
</div>
</body>
</html>
3.【运行】效果图：
用浏览器打开getUserinfo.html文件，显示
jQuery中读取json文件示例代码
使用jQuery解析JSON数据
2.例子 二
1.json文件：test.json
"id": 1
,
"uname":"andy"
,
"unumber": 1
,
"courseInfos"
: [
"id": 1
,
"cname": "数学"
,
"caddress": "1号楼"
"id": 3
,
"cname": "英语"
,
"caddress": "外教楼"
"id": 2
,
"uname": "zty"
,
"unumber": 2
,
"courseInfos"
: [
"id": 2
,
"cname": "化学"
,
"caddress": "综合楼"
"id": 3
,
"cname": "英语"
,
"caddress": "外教楼"
"id": 3
,
"uname": "巩希波"
,
"unumber": 3
,
"courseInfos"
: []
"id": 5
,
"uname": "xiaoming"
,
"unumber": 4
,
"courseInfos"
: []
2.读取json文件的getUserInfor2.html文件：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>getJSON获取数据</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style type="text/css">
#divframe {
border: 1px solid #999;
width: 500px;
margin: 0 auto;
.loadTitle {
background: #CCC;
height: 30px;
</style>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$.getJSON("test.json", function (data) {
var $jsontip = $("#jsonTip");
var strHtml = "读取的数据：<br/>";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data, function (haha, info) {
strHtml += "姓名：" + info["uname"] + "<br>";
strHtml += "id：" + info["id"] + "<br>";
var infos = info["courseInfos"];
$.each(infos, function (hehe, info2) {
strHtml += "科目：" + info2["cname"] + "<br>";
strHtml += "教学楼：" + info2["caddress"] + "<br>";
strHtml += "<hr>"
$jsontip.html(strHtml);//显示处理后的数据
</script>
</head>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="获取数据" id="btn"/>
</div>
<div id="jsonTip">
</div>
</div>
</body>
</html>
3.用浏览器打开，查看效果图：
