解析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 ...

随机推荐

php通过post将表单数据保存到数据库实例
html的form表单 <form id="contact-form" method="POST" action="../php/msg.php ...
js获取滚动条的位置
页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement. 页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body ...
Introduction to Mathematical Thinking - Week 4
否定的逻辑应该思考符号背后表示的逻辑,而不是像操作算术运算符一样操作逻辑符号. 比如对于任意的 x,x属于自然数,那么 x 是偶数或者奇数:这是对的如果使用“乘法分配律”拆分,变成“对于任意的x ...
小程序html 显示图片处理
let arr = [] for (const v of r.data.data ){ // v.content = v.content.replace(/<img/g ,' <image ...
<2013 07 06> Future and Near Future
试图了解量子力学近现代基础物理学理论量子计算机脑科学近现代生物学遗传变异与进化复杂工程学系统工程管理科学人工智能智能算法机器学习深度学习大数据云计算 ...
python面试题（三）
1 一行代码实现9*9乘法表 print ("\n".join("\t".join(["%s*%s=%s" %(x,y,x*y) for y ...
Ubuntu系统vi编辑器上下左右键变ABCD的解决方法（转）
首先卸载旧版本的vi编辑器: $sudo apt-get remove vim-common 然后安装新版vi即可: $sudo apt-get install vim Ubuntu自带有几种版本的v ...
android学习一---搭建开发环境
android基于Java并运行Linux内核上的轻量级操作系统.由于是基于java的,学习起来也不是太难,对java有一定了解并知道一些基本的图形用户界面,入门就很简单了. 一.了解JDK ,SDK ...
OVF and OVA
最近测试的东西有关于ovf 和ova等相关用例,在网上找了点内容摘抄了下来. 一.什么是OVF文件开源虚拟化格式OVF文件是一种开源的文件规范,它描述了一个开源.安全.有效.可拓展的便携式虚拟打包以 ...
VIMTUTOR 1.7中文版
文章来源:http://waterxfire.blog.hexun.com/4106986_d.html =============================================== ...

解析3级JSON的例子

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

随机推荐

热门专题