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

随机推荐

xpath与css基本使用方法
path使用方法 1.工具Firefox50版本以下,安装插件firebug.firepath
二、Android应用的界面编程（七）ViewAnimator及其子类[ ViewSwitcher、ImageSwitcher、TextSwitcher、ViewFlipper ]
ViewAnimator是一个基类,它继承了FrameLayout.因此它表现出FrameLayout的特征,可以将多个View组“叠”在一起. ViewAnimator可以在View切换时表现出动画 ...
20160916-3：mysql主从复制
一.什么是主从复制将一个数据库节点的数据拷贝到一个或多个数据库节点(主节点—>从节点) 二.主从复制的原理 [简述]:将主节点上的变更操作存储到binlog,从节点建立了到主节点的复制关系后, ...
getDomain(url)-我的JavaScript函数库-mazey.js
获取链接地址中域名,如mazey.net,www.mazey.net,m.mazey.net. 参数:url 必需function getDomain(url){ var a = documen ...
进程、数据共享、进程锁、进程池、requests模块和bs4（beautifulsoup）模块
一.进程 1.进程间数据不共享,如下示例: import multiprocessing data_list = [] def task(arg): data_list.append(arg) pri ...
LeetCode：整数转罗马数字【12】
LeetCode:整数转罗马数字[12] 题目描述罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符数值 I 1 V 5 X 10 L 50 C 100 D 500 M 10 ...
LeetCode：杨辉三角【118】
LeetCode:杨辉三角[118] 题目描述给定一个非负整数 numRows,生成杨辉三角的前 numRows 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 5 输出: ...
Python3 optparse模块
Python 有两个内建的模块用于处理命令行参数: 一个是 getopt,<Deep in python>一书中也有提到,只能简单处理命令行参数: 另一个是 optparse,它功能强大 ...
PsySH——PHP交互式控制台
PsySH PsySH is a runtime developer console, interactive debugger and REPL for PHP. PsySH是一个PHP的运行时开发 ...
LeetCode 14. Longest Common Prefix字典树 trie树学习之公共前缀字符串
所有字符串的公共前缀最长字符串特点:(1)公共所有字符串前缀 (好像跟没说一样...) (2)在字典树中特点:任意从根节点触发遇见第一个分支为止的字符集合即为目标串参考问题:https://lee ...

解析3级JSON的例子

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

随机推荐

热门专题