这次给大家带来jquery解析json字符串json数组步骤详解（附代码），jquery解析json字符串json数组的注意事项有哪些，下面就是实战案例，一起来看一下。
本文实例讲述了jquery解析json字符串及json数组的方法。分享给大家供大家参考。具体如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.6.2.min.js"></script>
</head>
<body>
<hr />
<h3>解析json字符串、json数组</h3>
<input type="button" id="jsonbtn" name="jsonbtn" value="jsonarray" />
<input type="button" id="jsonarray2" name="jsonarray2" value="jsonarray2" />
<input type="button" id="jsonstr" name="jsonstr" value="jsonstr" />
<input type="button" id="jsonstr2" name="jsonstr2" value="jsonstr2" />
<hr />
<p class="jsontext">
{ret: 0, msg: , is_lost:0, nickname: 小米, gender: 男, province: 广东, city: 广州, year: 1990, figureurl: http:\/\/qzapp.qlogo.cn\/qzapp\/101152201\/d87bf108b19279f31587ce96e5648a98\/30, figureurl_1: http:\/\/qzapp.qlogo.cn\/qzapp\/101152201\/d87bf108b19279f31587ce96e5648a98\/50, figureurl_2: http:\/\/qzapp.qlogo.cn\/qzapp\/101152201\/d87bf108b19279f31587ce96e5648a98\/100, figureurl_qq_1: http:\/\/q.qlogo.cn\/qqapp\/101152201\/d87bf108b19279f31587ce96e5648a98\/40, figureurl_qq_2: http:\/\/q.qlogo.cn\/qqapp\/101152201\/d87bf108b19279f31587ce96e5648a98\/100, is_yellow_vip: 0, vip: 0, yellow_vip_level: 0, level: 0, is_yellow_year_vip: 0}
</p>
<hr />
<p class="jsonarray">
{ 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:'商洛市'}
],
json:
[
{name:'6103',value:'宝鸡市'},
{name:'6104',value:'咸阳市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6110',value:'商洛市'}
]
}
</p>
<hr />
<p class="jsonarray2">
[
{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:'商洛市'}
]
</p>
</body>
</html>
<script type="text/javascript">
///jquery 解析json字符串
//解析复杂的json数组
$(#jsonbtn).click(function(){
var data=$(.jsonarray).html();
alert(-----+data);
var dataobj=eval((+data+));//转换为json对象
alert(dataobj.root.length);//输出root的子对象数量
alert(dataobj.json.length);//输出json的子对象数量
//遍历json数组
$.each(dataobj.root, function(i, item) {
alert(item.name+-----root-------+item.value);
});
//遍历json数组
$.each(dataobj.json, function(i, item) {
alert(item.name+-----json-------+item.value);
});
});
//解析单个的json数组
$(#jsonarray2).click(function(){
var data=$(.jsonarray2).html();
alert(-----+data);
var dataobj=eval((+data+));//转换为json对象
alert(dataobj.length);//输出root的子对象数量
//遍历json数组
$.each(dataobj, function(i, item) {
alert(item.name+-----jsonarray-------+item.value);
});
});
///解析标准的json串 方法一
$(#jsonstr).click(function(){
var json=$(.jsontext).html();
alert(---2--+json);
var item = jquery.parsejson(json);
alert(item.nickname);
alert(item.ret);
alert(item.figureurl );
});
///解析标准的json串，方法二
$(#jsonstr2).click(function(){
var json=$(.jsontext).html();
alert(---2--+json);
var obj = eval((+json+));
alert(obj.nickname);
alert(obj.ret);
alert(obj.figureurl );
});
</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery的方法grep()实现数组过滤筛选
jquery如何遍历数组
jquery获取页面宽高方法总结
以上就是jquery解析json字符串json数组步骤详解（附代码）的详细内容。