解析3级JSON的例子
我们都知道现在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!
