解析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:;

		padding:;

		border: none;

		font-size:16px;

	}

	h3,h4,h5,h6{

		font-weight: ;

	}

	.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=;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=;i<h4s.length;i++){

									if($(h4s[i]).find('input').val().length==)

										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!=)

									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>){

					$(divSedonds).each(function(){

						var divThirds = $(this).find('>div.third');

						if(divThirds&&divThirds.length>){

							$(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!

解析3级JSON的例子的更多相关文章

Gson解析复杂的json数据
最近在给公司做一个直播APK的项目,主要就是通过解析网络服务器上的json数据,然后将频道地址下载下来再调用Android的播放器进行播放,原先本来打算使用普通的json解析方法即JsonObject ...
使用Gson解析复杂的json数据
Gson解析复杂的json数据最近在给公司做一个直播APK的项目,主要就是通过解析网络服务器上的json数据,然后将频道地址下载下来再调用Android的播放器进行播放,原先本来打算使用普通的jso ...
如何利用.Net内置类，解析未知复杂Json对象
如何利用.Net内置类,解析未知复杂Json对象如果你乐意,当然可以使用强大的第三方类库Json.Net中的JObject类解析复杂Json字串 . 我不太希望引入第三方类库,所以在.Net内置类J ...
Python解析非标准JSON（Key值非字符串）
采集数据的时候经常碰到一些JSON数据的Key值不是字符串,这些数据在JavaScript的上下文中是可以解析的,但在Python中,没有该部分数据的上下文,无法采用json.loads(JSON)的 ...
C# 解析嵌套的json文件.
概述今天我同学问我如何转换json文件,没处理过,网上搜了一下,json转excel的很少,反过来倒是有许多人写了工具. json文件的结构大致是这样的: {, , }, , "type& ...
JSON在线解析，新版本JSON在线解析
SOJSON,出了新版本的JSON在线解析,真的很好用,可以上下版本.左右版本.效果图如下.它的网址是:http://www.sojson.com/simple_json.html SOJSON集成了 ...
使用Python解析豆瓣上Json格式数据
现在的API接口多为xml或json,json解析更简洁相对xml来说以豆瓣的API接口为例,解析返回的json数据: https://api.douban.com/v2/book/1220562 ...
AJAX html 传输json字符串&&巧妙运用eval()来解析返回的JSON字符串
1.AJAX html 传输json字符串: js方法如下: function saveRetYwlsh(){ var xmbh = document.getElementById("xmb ...
Jmeter(三十四)_Beanshell解析并提取json响应
1:前置条件将fastjson-1.2.49.jar包置于jmeter的lib目录下,并将该jar包添加到测试计划的Library中:否则会报:Typed variable declaration ...

随机推荐

hdu1174（3维射线与圆是否相交）
简单的题意,要注意z2 = h2*0.9-r2 #include <iostream> #include <cmath> #include <vector> #in ...
Cocos2d-x Lua中帧动画
帧动画就是按一定时间间隔.一定的顺序.一帧一帧地显示帧图片.我们的美工要为精灵的运动绘制每一帧图片,因此帧动画会由很多帧组成,按照一定的顺序切换这些图片就可以了. 在Cocos2d-x Lua中播放帧 ...
Cocos2d-x Lua中实例：特效演示
下面我们通过一个实例介绍几个特效的使用,这个实例如下图所示,上图是一个操作菜单场景,选择菜单可以进入到下图动作场景,在下图动作场景中点击Go按钮可以执行我们选择的特性动作,点击Back按钮可以返回到菜 ...
写给上C语言课的孩子们
前几天因为五一的关系,参加了好几次同学会,有一些感触和大家分享,到了我们这个年纪,同学们大多家庭.事业小有成就,对自己会有激励,在有的同学显摆自己的车房.电子设备.身家时,忽然想一个人的成熟应该是慢慢 ...
h5-localStorage实现缓存ajax请求数据
使用背景:要实现每次鼠标hover“能力雷达”,则显示能力雷达图(通过ajax请求数据实现雷达图数据显示),所以每次hover都去请求ajax会影响性能,因此这里要用到本地缓存. 实现: 此处是通过传 ...
standard pbr(二）
下一步看像素着色器代码 half4 fragBase (VertexOutputForwardBase i) : SV_Target { return fragForwardBaseInternal( ...
java基础—Hashtable，HashMap，TreeMap的差别
Hashtable : 此类实现一个哈希表,该哈希表将键映射到对应的值.不论什么非null 对象都能够作键值,是线程不同步的 HashMap : 基于哈希表的Map接口的实现.此实现提供全部可选的映 ...
vue 项目 npm install 报错解决
node-sass 安装报错解决办法 2017年04月15日 14:34:25 阅读数:20189 E:\kibana>npm install node-sass > node-sass@ ...
LATEX教程（二）
插入图片 \documentclass{article} \usepackage{graphicx} \usepackage{Ctex} \title{插入图片} \author{yif} \begi ...
boost之string_algo
string_algo是用于处理字符串查找,替换,转换等一系列的字符串算法前缀i:表示大小写不敏感后缀_copy:表示不变动输入,返回处理结果的拷贝后缀_if:表示算法需要一个判断式的谓词函数对 ...

解析3级JSON的例子

解析3级JSON的例子的更多相关文章

随机推荐

热门专题