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

随机推荐

【python】-- Django
Django Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Sessio ...
Python菜鸟之路：Django 表单验证
前言 Django中完成表单验证,常用的有两种方法: 一种是通过HTML + JS + Ajax实现. 另一种是通过Django自身的forms模块来生成相应个HTML标签来完成表单验证.这是本节着重 ...
Testlink安装访问提示“应用程序DEFAULT WEB SITE”中的服务器错误
错误摘要:HTTP错误403.14 - ForbiddenWeb服务器被配置为不列出此目录的内容.
常用的JS代码块收集
/**数组去重一*/ (function (arr) { arr = arr.sort(); for (var i = 0; arr[i]; i++) { if (arr[i] === arr[i + ...
ftp 协议分析
File Transfer Protocol(文件传输协议) 使用SOCKET实现 FTP的客户端协议规则: .h #pragma once #include <string> #incl ...
Python替换文件内容
#!/usr/bin/env python import fileinput for line in fileinput.input('fansik',inplace=1): line = line. ...
Python学习笔记1_初识Python
一.Python的发展 1.CNRI时期:CNRI是自助Python发展初期的重要单位,Python1.5版之前的成果大部分都在此时期内完成 2.BeOpen时期:Guido van Rossum与B ...
Http1.0和Http1.1的主要区别
1.HTTP 1.1支持长连接(PersistentConnection)和请求的流水线(Pipelining)处理 HTTP 1.0规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器 ...
解决svnserve: Can't bind server socket: Address already in use
最近在忙着搭建jenkins系统集成版本控制和git分布式版本控制,其中涉及到了点svn方面的,由于自己也是第一次搭建svn,挺顺利的,中间遇到点小问题: 我使用的是yum安装的svn,安装完成配置结 ...
剑指offer 面试27题
面试27题: 题目:二叉树的镜像题:操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / ...

解析3级JSON的例子

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

随机推荐

热门专题