jquery解析JSON
- 例子 一：
json文件是一種輕量級的數據交互格式。一般在jquery中使用getJSON()方法讀取，具體示例代碼如下，感興趣的朋友可以參考下哈，希望可以幫助到你
$.getJSON(url,[data],[callback])
url：加載的頁面地址
data: 可選項，發送到服務器的數據，格式是key/value
callback:可選項，加載成功后執行的回調函數
目錄結構：
1.首先建一個JSON格式的文件userinfo.json 保存用戶信息。
如下:
[
{
"name":"張國立",
"sex":"男",
"email":"zhangguoli@123.com"
},
{
"name":"張鐵林",
"sex":"男",
"email":"zhangtieli@123.com"
},
{
"name":"鄧婕",
"sex":"女",
"email":"zhenjie@123.com"
}
]
2.其次建一個getUserinfo.html頁面用於獲取JSON文件里的用戶信息數據，並顯示
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<body>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="獲取數據" id="btn"/>
</div>
<div id="jsonTip">
</div>
</div>
</body>
</html>
3.【運行】效果圖：
用瀏覽器打開getUserinfo.html文件，顯示
參考：
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">
<head>
<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>
<body>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="獲取數據" id="btn"/>
</div>
<div id="jsonTip">
</div>
</div>
</body>
</html>
3.用瀏覽器打開，查看效果圖：
