我們都知道現在Ajax盛行，而且前后台數據交流的格式已經換成了JSON了。雖然我對這種做法還是有點擔憂的，如果用戶關閉了JavaScript怎么辦？但是這些擔憂還是不能阻止Ajax的盛行和JSON數據交流格式的流行。之前只知道JSON是一種鍵值對格式的數據格式，但是也沒有怎么深入去了解，也沒有做到這次這樣一層一層嵌套足有3級之多的情況。
言歸正傳，我們先來看看JSON是什么鬼？
JSON：JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON采用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成為理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成(網絡傳輸速度)。
從上面就不難看出JSON的優點了，之前很喜歡用POST和GET的童鞋也注意一下，JSON比起頁面提交的優點：
- 只對有用的數據進行封裝傳輸。而傳統的提交基本上是一個form整個扔到后台去慢慢讀，從這里可以看出第一點首先是數據傳輸量的降低。
- 第二個優點則是JSON是一種與平台無關的數據傳輸格式，你在JSP可以用，我在ASP.NET也可以用，萬金油的格式，而且現在很多后台都用JSON傳輸數據。
看到JSON這么好用，估計也是JSON流行的原因之一了，簡單粗暴。簡單的學習請看W3Shool的簡單教程：點擊這里
接下來是我自己做的一個解析3級JSON的例子，不廢話直接貼圖：
額，因為用到了JQuery和JQuery的JSON控制庫,所以最好還是下載demo直接看比較好：demo在這里,快戳
或者你已經有了這兩個庫，也可以直接拷貝下面代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>志願報名系統</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0 none;
font-size:16px;
}
h3,h4,h5,h6{
font-weight: 400;
}
.system #type{ /*類型*/
height:35px;
line-height: 35px;
overflow: hidden;
background:#FEDCBD;
}
.system #type h3{
width:300px;
float:left;
display: inline;
text-align: center;
}
.system div.first,div.second,div.third,div.fourth,div.fifth{
overflow: hidden;
}
.system div.second h3{
text-align: center;
}
.system div.second div{
float:left;
display: inline;
}
.system div.second h3,.system div.second h4,.system div.second h5{
width:300px;
float:left;
clear:both;
display: inline;
}
div.second h3{
background: #D3D7D4;
}
div.second h4,div.fourth{
background:#CDE6C7;
}
div.third{
border-left:1px solid #aaa;
}
div.second h5,div.fifth{
background:#AFB4DB;
}
div.second h3,div.second h4,div.second h5{
border-top:1px solid #aaa;
}
.system div.second h4,.system div.second h5{
text-indent: 2em;
}
div.first div.second div.third input{
float:right;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.json.js"></script>
</head>
<body>
<div class="system" id="add">
</div>
<div style="position:fixed;top:20px;right:20px;">
<input id="btn1" style="background:#F1FEDD;border:1px solid #aaa;" type="button" value="點我查看JSON數據" />
<input id="btn2" style="background:#F1FEDD;border:1px solid #aaa;" type="button" value="點我向div添加JSON數據" />
<input id="btn3" style="background:#F1FEDD;border:1px solid #aaa;"type="button" value="點我向樹添加文本框" />
<input id="btn4" style="background:#F1FEDD;border:1px solid #aaa;"type="button" value="點我向后台傳輸JSON" />
</div>
<script type="text/javascript">
$(function(){
var jsonString = '{"團隊信息":{},"個人信息":{"項目經驗":"#","語言":{"普通話":"#","粵語":"#","英語":"#"},"辦公軟件":{"Word":"#","Excel":"#","PPT":"#","Access":"#"},"多媒體":{"photoshop":"#","音頻剪輯":"#","視頻剪輯":"#"},"宣傳報道":{"攝影":"#","攝像":"#","采訪":"#","新聞稿撰寫":"#","海報傳單制作":"#","微博管理":"#","微信管理":"#","網站管理":"#"},"舞台工作經驗":{"音響設備調試":"#","燈光控制":"#","采訪":"#","新聞稿撰寫":"#","海報傳單制作":"#","微博管理":"#","微信管理":"#","網站管理":"#"},"其他":{"禮儀":"#","醫療":"#","活動策划":"#"}},"技能":{"項目經驗":"#","語言技能":{"普通話":"#","日語技能":"#","英語技能":"#"},"辦公軟件":{"三國殺":"#","VS":"#","fiddle":"#","QQ":"#"},"Adobe":{"PS":"#","AI":"#","AE":"#"},"宣傳報道":{"攝影":"#","攝像":"#","采訪":"#","新聞稿撰寫":"#","海報傳單制作":"#","微博管理":"#","微信管理":"#","網站管理":"#"},"舞台工作經驗":{"音響設備調試":"#","燈光控制":"#","采訪":"#","新聞稿撰寫":"#","海報傳單制作":"#","微博管理":"#","微信管理":"#","網站管理":"#"},"其他技能":{"樂器":"#","醫療":"#","活動策划":"#"}}}';
$("#btn1").click(function(){
alert(jsonString);
});
$('#btn2').click(function(){
var data = setData(jsonString);
$("#add").append(data);
});
$('#btn3').click(function(){
insertTextInput();
});
$('#btn4').click(function(){
var data = getData();
alert($.toJSON(data));
});
});
/*將頁面數據讀取轉化為JSON*/
function getData(){
var constructor = new Object();
var h1Object = new Object();
$(".first").each(function(){
var seconds = $(this).find('>div.second');
var h3Object = new Object();
var h2Object = new Object();
if(seconds&&seconds.length){
for(var j=0;j<seconds.length;j++){
var thirds = $(seconds[j]).find('>div.third'); //獲取當前div.second下的div.third
if(thirds&&thirds.length){
var h4s = $(thirds).find('>h4');
var h4Object = new Object(); //三級標題對象構建，名字為h4,值為input的value
if(h4s&&h4s.length){
for(var i=0;i<h4s.length;i++){
if($(h4s[i]).find('input').val().length==0)
h4Object[$(h4s[i]).text()] = "#";
else
h4Object[$(h4s[i]).text()] = $(h4s[i]).find('input').val();
}
}
h3Object[$(seconds[j]).find('>h3').text()] = h4Object;
}else{
if($(seconds[j]).find('>h3>input').val() == ""){//如果沒有內容
h3Object[$(seconds[j]).find('>h3').text()] = "#";
}else{
h3Object[$(seconds[j]).find('>h3').text()] = $(seconds[j]).find('>h3>input').val();
}
}
}
h1Object[$(this).find('>h2').text()] = h3Object;
}else {
if($(this).find('>h2>input').val()=="")
h1Object[$(this).find('>h2').text()] = "#";//只有一個一級標題
else
h1Object[$(this).find('>h2').text()] = $(this).find('>h2>input').val();
}
});
return h1Object;//返回構建的JSON對象
}
/*將JSON數據綁定到頁面*/
function setData(data){
var html = "";
var obj = eval('('+data+')'); //字符串轉JSON對象
$.each(obj,function(name,key){
var html1 = ""; //采用分級加字符串的方法，每次迭代一個，然后記入總的html里面
html1 += "<div class='first'><h2>"+name+"</h2>";
if(!isEmptyObject(key)){
$.each(key,function(name,key){
var html2 = "<div class='second'>";
html2 += "<h3>"+name+"</h3>";
if(!isEmptyObject(key)&&key!='#'){
html2 +="<div class='third'>";
for(var temp in key){
if(temp!=0)
html2 += "<h4>"+temp+"</h4>";
}
html2 += "</div>";//對應<div class='third'>
}
html2 += "</div>";//對應<div class='second'>
html1 += html2;
});
html1 += "</div>";
}else{
html1 += "</div>";//只有一級標題的時候，閉合標簽
}
html += html1;
});
console.log(html);
return html;
}
//判斷一個對象是不是空的對象
function isEmptyObject(obj){
for(var name in obj){
return false;
}
return true;
}
/*迭代向頁面內添加文本框
文本框<input style="border:1px solid #aaa;padding:2px 5px;width:100px" type="text" value="" />
*/
function insertTextInput(){
var textInput = "<input style='border:1px solid #aaa;padding:2px 5px;width:100px' type='text' value='' />"
$(".first").each(function(){
var divSedonds = $(this).find('>div.second');
if(divSedonds&&divSedonds.length>0){
$(divSedonds).each(function(){
var divThirds = $(this).find('>div.third');
if(divThirds&&divThirds.length>0){
$(divThirds).each(function(){
//三級標題里面添加文本框
$(this).find('>h4').append(textInput);
});
}else{
//只有二級標題沒有三級標題
$(this).find('>h3').append(textInput);
}
});
}else{
//找不到二級標題,向一級標題下加input
$(this).find('>h2').append(textInput);
}
});
}
</script>
</body>
</html>
其實我們不難看出來就是不停地往頁面下面讀取數據而已，這也是因為被我自己定的頁面結構所限制了。因為要配合這樣的頁面結構，所以不得不用很繁雜的下級讀取。
再來說下JSON的多級讀取問題：
首先是JQuery的迭代方法，$.each()，詳細的用法請看：mabel_on_line的jQuery $.each用法
其次是對JSON格式的解析，需要將原來的對象轉化成字符串，這里我推薦的是：石曼迪分享使用Jquery解析Json基礎知識
例子中我用的解析JSON字符串的方法是eval方法，也是原生JS內置的方法，個人覺得比起框架的原生的會穩定的多。
純屬自虐行為，如果有更好更方便的解析多級JSON的方法請留言告訴我，thanks!