使用Jquery解析Json基础知识
2015-11-14 09:14
836 查看
前言
重点:在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换、JSON数据的解析(就是把从后台传过来的json字符串转换为json对象,这样才能取出数据;json字符串是去不了数据的必须转换为json对象才能用)是关键。
先明确2个概念例如:
JSON字符串:
JSON对象:
可以简单这样理解:
JSON对象是直接可以使用JQuery获取数据的格式,如C#中可以用对象(类名)点出属性(方法)一样;
JSON字符串仅仅只是一个字符串,一个整体,不截取(转为json对象)的话没办法取出其中存储的数据,不能直接使用,除非你只想alert()他;
eval('(' + str + ')'); //其中str就是满足本标题描述的字符串
var dataObj=eval("("+data+")");//转换为json对象
为什么要 eval这里要添加 “("("+data+")");//”呢?
原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
加
上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句
(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和
结束标记,那么{}将会被认为是执行了一句空语句
以上均会输出结果“john”。
Eval方式可以转换以下标准和非标准格式字符串:
参见本例下载包中:JqueryDemo1.html
1.对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象,以下举例说明:
var dataObj=eval("("+data+")");//转换为json对象
alert(dataObj.root.length);//输出root的子对象数量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//输出每个root子对象的名称和值
alert("name:"+item.name+",value:"+item.value);
})
注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。
2.
对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得
服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例说
明数据处理方法:
$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了 eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。
3.jquery中$each()的用法
$.each()是用来在回调函数中解析JSON数据的方法,下面是官方文档:
callback(indexInArray, valueOfElement)The function that will be executed on every object.
$.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是 遍历的index,第二个是当前遍历的值。哈哈,有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……
正如上面,loadinfo是请求的地址,function(data){...}就是在请求成功后的回调函数,data封装了返回的JSON对 象,在下面的$.each(data.comments,function(i,item){...})方法中data.comments直接到达 JSON数据内包含的JSON数组:
$.each()方法中的function就是对这个数组进行遍历,再通过操作DOM插入到合适的地方的。在遍历的过程中,我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。
上例的运行结果如下:
如果返回的JSON数据比较复杂,则只需多些$.each()进行遍历即可,嘿嘿。例如如下JSON数据:
js如下:
值得注意的是,$.each()遍历Map的时候,function()中的参数是key和value,十分方便。
上例的运行效果:
以上均会输出结果“john”。
此种方式仅支持标准格式:var str='{ "name": "John" }';
参见本例下载包中:JqueryDemo2.html
以上均会输出结果“john”。
此种方式仅支持标准格式:var str='{ "name": "John" }';
参见本例下载包中:JqueryDemo3.html
以上结果一致,均输出姓名,如下图:
特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。
D:$.getJSON()方法
利用$.getJSON()方法获得服务器返回,那么就不 需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例
例1
代码如下:
var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'北京市'},
{name:'6102',value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重庆市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";
jquery
代码如下:
$.getJSON("http://sanic.cnblogs.com/",{param:"sanic"},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
代码如下:
var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();
或者
以及其他的你能想到的各种本质正确的非法格式,那么有扩展库可以解决
jquery-json 扩展库
下载地址在这里:http://code.google.com/p/jquery-json/
这个库用来扩展 jQuery ,对于 JSON 的使用,扩展了两个函数:toJSON和parseJSON
toJSON 函数用来将一个普通的 JavaScript 对象序列化为 JSON 对象。
parseJSON函数用来将一个普通的 JavaScript 对象序列化为 JSON 对象too。
以上代码执行结果如:
参见本例下载包中:JqueryDemo5.html
例如:
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);
如上面的例子:
就可以这样读取:
弹出” mady”。
我们遇到的JSON很少有这么简单的,比如复杂一点的JSON对象如:
解析用:
弹出:”mady”。
再再复杂一点的如:
如果你想单挑的话,解析用:
弹出:“6200”。
如果你想群挑的话,解析用:
其中这个“#info”是个DIV的ID。输入结果如下图:
参见本例下载包中:JqueryDemo4.html
注意:本例如果要使用其他转换函数请更改字符串内单引号为双引号,外引号为单引号。
重点:在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换、JSON数据的解析(就是把从后台传过来的json字符串转换为json对象,这样才能取出数据;json字符串是去不了数据的必须转换为json对象才能用)是关键。
先明确2个概念例如:
JSON字符串:
var str1 = '{ "name": "deyuyi", "sex": "man" }';
JSON对象:
var str2 = { "name": "deluyi", "sex": "man" };
可以简单这样理解:
JSON对象是直接可以使用JQuery获取数据的格式,如C#中可以用对象(类名)点出属性(方法)一样;
JSON字符串仅仅只是一个字符串,一个整体,不截取(转为json对象)的话没办法取出其中存储的数据,不能直接使用,除非你只想alert()他;
一、JSON字符串转换为JSON对象
要使用上面的str1,必须使用下面的方法先转化为JSON对象:A:eval函数
eval函数可以直接将本质符合或者近似符合JSON格式的字符串转换为JSON对象,使用方式如:eval('(' + str + ')'); //其中str就是满足本标题描述的字符串
var dataObj=eval("("+data+")");//转换为json对象
为什么要 eval这里要添加 “("("+data+")");//”呢?
原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
加
上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句
(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和
结束标记,那么{}将会被认为是执行了一句空语句
//由JSON字符串转换为JSON对象
var str='{ "name": "John" }'; var obj = eval('(' + str + ')'); alert( obj.name); var str2="{ 'name': 'John' }"; var obj2 = eval('(' + str2 + ')'); alert( obj2.name); var str3="{ name: 'John' }"; var obj3 = eval('(' + str3 + ')'); alert( obj3.name);
以上均会输出结果“john”。
Eval方式可以转换以下标准和非标准格式字符串:
var str="{ 'name': 'John' }"; var str2='{ "name": "John" }'; var str3="{ name: 'John' }";
参见本例下载包中:JqueryDemo1.html
1.对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象,以下举例说明:
var dataObj=eval("("+data+")");//转换为json对象
alert(dataObj.root.length);//输出root的子对象数量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//输出每个root子对象的名称和值
alert("name:"+item.name+",value:"+item.value);
})
注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。
2.
对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得
服务器返回,那么就不需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例说
明数据处理方法:
$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了 eval()的第三方客户端脚本库,比如JSON in JavaScript就提供了一个不超过3k的脚本库。
3.jquery中$each()的用法
$.each()是用来在回调函数中解析JSON数据的方法,下面是官方文档:
jQuery.each( collection, callback(indexInArray, valueOfElement) )
collectionThe object or array to iterate over.callback(indexInArray, valueOfElement)The function that will be executed on every object.
$.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是 遍历的index,第二个是当前遍历的值。哈哈,有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……
function loadInfo() { $.getJSON("loadInfo", function(data) { $("#info").html("");//清空info内容 $.each(data.comments, function(i, item) { $("#info").append( "<div>" + item.id + "</div>" + "<div>" + item.nickname + "</div>" + "<div>" + item.content + "</div><hr/>"); }); }); }
正如上面,loadinfo是请求的地址,function(data){...}就是在请求成功后的回调函数,data封装了返回的JSON对 象,在下面的$.each(data.comments,function(i,item){...})方法中data.comments直接到达 JSON数据内包含的JSON数组:
[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]
$.each()方法中的function就是对这个数组进行遍历,再通过操作DOM插入到合适的地方的。在遍历的过程中,我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。
上例的运行结果如下:
如果返回的JSON数据比较复杂,则只需多些$.each()进行遍历即可,嘿嘿。例如如下JSON数据:
{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}],"content":"你是木头人,哈哈。","infomap":{"性别":"男","职业":"程序员","博客":"http:\/\/www.cnblogs.com\/codeplus\/"},"title":"123木头人"}
js如下:
function loadInfo() { $.getJSON("loadInfo", function(data) { $("#title").append(data.title+"<hr/>"); $("#content").append(data.content+"<hr/>"); //jquery解析map数据 $.each(data.infomap,function(key,value){ $("#mapinfo").append(key+"----"+value+"<br/><hr/>"); }); //解析数组 $.each(data.comments, function(i, item) { $("#info").append( "<div>" + item.id + "</div>" + "<div>" + item.nickname + "</div>" + "<div>" + item.content + "</div><hr/>"); }); }); }
值得注意的是,$.each()遍历Map的时候,function()中的参数是key和value,十分方便。
上例的运行效果:
B:parseJSON函数
另一种将标准字符串转换为JSON对象的函数是parseJSON(),使用方式如jQuery.parseJSON(str)//其中str就是满足本标题描述的字符串//由JSON字符串转换为JSON对象
var str='{ "name": "John" }'; var obj = jQuery.parseJSON(str) alert("1"+ obj.name);
以上均会输出结果“john”。
此种方式仅支持标准格式:var str='{ "name": "John" }';
参见本例下载包中:JqueryDemo2.html
<script type="text/javascript" src="./javascript/jquery-1.11.2.min.js"></script> <!--此处引用jQuery--> <!-- 此段为Ajax与后端交互部分--> <script type="text/javascript"> $(document).ready(function(){ $("#usrname").change(function(){ $("logtip").empty(); $.ajax({ url : "login", // 后台处理程序,对应Action type : "post", // 数据发送方式 dataType : "json", // 接受数据格式 data:{ usrname : $("#usrname").val() }, // 要传递的数据 // 回传函数 timeout:20000, // 设置请求超时时间(毫秒)。 error: function () { //请求失败时调用函数。 $("#logtip").html("请求失败!"); }, success:function(dataObj){ //请求成功后回调函数。 //alert(dataObj); str = jQuery.parseJSON(dataObj); $("#echoname").html(str.usrname); $("#echowd").html(str.passwd); } }); }); }); </script>
</head> <body> <div> 欢迎进入Struts2.3的世界 </div> <div> <div> <span>账号:</span> <span><input type="text" name="usrname" id="usrname"/></span> <span id="logtip"></span> </div> <div> <span>账号:</span> <span id="echoname"></span> <span>密码: </span> <span id="echowd"></span> </div> </div> </body>
C:JSON.parse函数
还有一种将标准字符串转换为JSON对象的函数是JSON.parse(),使用方式如JSON.parse(str)//其中str就是满足本标题描述的字符串var str = '{ "name": "mady", "age": "24" }'; var obj = JSON.parse(str); alert(obj.name);
以上均会输出结果“john”。
此种方式仅支持标准格式:var str='{ "name": "John" }';
参见本例下载包中:JqueryDemo3.html
以上结果一致,均输出姓名,如下图:
特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。
D:$.getJSON()方法
利用$.getJSON()方法获得服务器返回,那么就不 需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例
例1
代码如下:
var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'北京市'},
{name:'6102',value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重庆市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";
jquery
代码如下:
$.getJSON("http://sanic.cnblogs.com/",{param:"sanic"},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
E:data =(new Function("","return "+json))();
解析方式就是使用Function对象来完成,它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析代码如下:
var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();
F:Other方式
如果忍不住想犯错,十分十分想解析非标准、非正规字符串,如:{name:mady,age:23}
或者
{name:’mady’,age:23}
以及其他的你能想到的各种本质正确的非法格式,那么有扩展库可以解决
jquery-json 扩展库
下载地址在这里:http://code.google.com/p/jquery-json/
这个库用来扩展 jQuery ,对于 JSON 的使用,扩展了两个函数:toJSON和parseJSON
toJSON 函数用来将一个普通的 JavaScript 对象序列化为 JSON 对象。
parseJSON函数用来将一个普通的 JavaScript 对象序列化为 JSON 对象too。
var data=$.toJSON({ x: 2, y: 3 });
var obj = jQuery.parseJSON(data);
alert(obj.x);
var str = {plugin: 'jquery-json', version: 2.3};
var data2=$.toJSON(str);
var obj2 = jQuery.parseJSON(data2);
alert(obj2.plugin);
以上代码执行结果如:
参见本例下载包中:JqueryDemo5.html
二、将JSON对象转换为字符串
可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。例如:
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);
三、解析读取JSON
我们通过各种方式将字符串转换为JSON对象后就是解析他了。如上面的例子:
var str2 = { "name": "mady", "sex": "man" };
就可以这样读取:
alert(str2.name);//和C#一样直接往出点…
弹出” mady”。
我们遇到的JSON很少有这么简单的,比如复杂一点的JSON对象如:
var str={"GetUserPostByIdResult":{"Age":"33","ID":"2server","Name":"mady"}};
解析用:
alert(str.GetUserPostByIdResult.Name);//一次点不出来,我多点几次
弹出:”mady”。
再再复杂一点的如:
var data=" { root: [ {'name':'6200','value':'0'}, {'name':'6101','value':'xa'}, {'name':'6102','value':'beijing'}, {'name':'6103','value':'haerbin'}]}";
如果你想单挑的话,解析用:
alert(dataObj.root[0].name);
弹出:“6200”。
如果你想群挑的话,解析用:
$.each(dataObj.root, function(index, item) { $("#info").append( "<div>" +index+":"+ item.name + "</div>" + "<div>" +index+":"+ item.value + "</div><hr/>"); });
其中这个“#info”是个DIV的ID。输入结果如下图:
参见本例下载包中:JqueryDemo4.html
注意:本例如果要使用其他转换函数请更改字符串内单引号为双引号,外引号为单引号。
相关文章推荐
- js自执行函数及参照jquery调用方法方式
- jquery操作radio
- 二、jQuery中的DOM操作
- jQuery作用
- JQuery动画效果
- jQuery学习笔记之插件
- jquery 禁止herf跳转,并执行相应的js代码
- jquery 禁止herf跳转,并执行相应的js代码
- 前端交互消息显示插件 jQuery Messenger(基于jQuery)
- jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式
- JQuery 之 Ajax 异步和同步浅谈
- 【转】C#类似Jquery的html解析类HtmlAgilityPack基础类介绍及运用
- JQuery中对Select的option项的添加、删除、取值
- jQuery select显示部分选项
- jquery选择器大全
- jquery幻灯片更新版
- Ajax成功添加新DOM元素 jquery 绑定元素事件
- Ajax成功添加新DOM元素 jquery 绑定元素事件
- jquery实践案例--验证手机号码
- jquery选择器 直观实验