上班過程中，一直使用封裝好的前端框架解析Json對(duì)象，這次我們用Jquery原生的解析來解析Json對(duì)象和Json數(shù)組。
一.前期準(zhǔn)備:
兩個(gè)Json文件:
json1:用來解析簡單的Json對(duì)象
{
"comments": [{
"content": "Hello",
"id": 1,
"nickname": "小三"
}, {
"content": "World",
"id": 2,
"nickname": "小四"
}]
}
json2：用來解析Json數(shù)組
{
"comments": [{
"content": "Hello",
"id": 1,
"nickname": "小三"
}, {
"content": "World",
"id": 2,
"nickname": "小四"
}],
"content": "我是Json對(duì)象content， 哈哈。",
"infomap": {
"性別": "男",
"職業(yè)": "程序員",
"博客": "http://www.itdecent.cn/u/86890c00216d"
},
"title": "你好，世界"
}
然后一個(gè)編輯器（我用的是Hbuilder）,將解析的兩個(gè)頁面與兩個(gè)json文件放入同一目錄，方便解析，如下:
Jq解析.JPG
二.代碼實(shí)現(xiàn)
json1用來解析簡單的json對(duì)象:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function loadInfo(){
$.getJSON("json1.json",function(data){
$("#info").html("")//清空info內(nèi)容
$.each(data.comments,function(i,item){
$("#info").append(
"<div>"+i+item.id+"</div>"+
"<div>"+i+item.nickname+"</div>"+
"<div>"+i+item.content+"</div>"
);
});
});
}
</script>
</head>
<body>
<p id="info"></p>
<button onclick="loadInfo()">點(diǎn)我加載數(shù)據(jù)</button>
<!--{
"comments": [{
"content": "很不錯(cuò)嘛",
"id": 1,
"nickname": "納尼"
}, {
"content": "喲西喲西",
"id": 2,
"nickname": "小強(qiáng)"
}]
}-->
</body>
</html>
然后在Hbuilder上運(yùn)行這個(gè)網(wǎng)頁看看:
json1
json2用來解析json數(shù)組:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function loadInfo(){
$.getJSON("json2.json",function(data){
$("#info").html("")//清空info內(nèi)容
//JQ解析數(shù)組
$.each(data.comments,function(i,item){
$("#info").append(
"<div>"+item.id+"</div>"+
"<div>"+item.nickname+"</div>"+
"<div>"+item.content+"</div>"
);
});
//JQ解析單節(jié)點(diǎn)（多元素）（非數(shù)組）
$.each(data.infomap,function(i,item){//鍵值都解析出來
$("#mapinfo").append(i+"-------"+item+"<br />");
});
//JQ解析單節(jié)點(diǎn)（單元素） 直接使用data.解析 data作為所有的節(jié)點(diǎn)的根節(jié)點(diǎn)
$("#title").append(data.title+"br /");
$("#content").append(data.content);
});
}
</script>
</head>
<body>
<p id="info"></p>
<p id="mapinfo"></p>
<p id="title"></p>
<p id="content"></p>
<button onclick="loadInfo()">點(diǎn)我加載數(shù)據(jù)</button>
</body>
</html>
同樣運(yùn)行一下這個(gè)html文件:
json2.gif
以上。喜歡就給顆小????吧~
