脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → Jquery解析json字符串及json数组

Jquery解析json字符串及json数组的方法

 更新时间：2015年05月29日 10:54:22   作者：wo_soul  
这篇文章主要介绍了Jquery解析json字符串及json数组的方法,实例分析了jQuery操作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 /> 
<div 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"} 
</div> 
<hr /> 
<div 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:'商洛市'} 
  ] 
 } 
</div> 
<hr /> 
<div 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:'商洛市'} 
 ] 
</div> 
</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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery实现天猫商品放大镜效果

    jQuery实现天猫商品放大镜效果

    这篇文章主要为大家详细介绍了jQuery实现天猫商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • jQuery封装的获取Url中的Get参数示例

    jQuery封装的获取Url中的Get参数示例

    js的纯前台处理时会遇到将一个网页的参数,通过get方式,传递给下一个页面的问题，此时可以获取Url中的Get参数，具体如下，需要的朋友可以参考下
    2013-11-11
  • jQuery中removeData()方法用法实例

    jQuery中removeData()方法用法实例

    这篇文章主要介绍了jQuery中removeData()方法用法,实例形式分析了removeData()方法移除匹配元素指定数据的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 使用 jQuery 实现表单验证功能

    使用 jQuery 实现表单验证功能

    表单作为 HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。下面通过实例代码给大家介绍jQuery 实现表单验证功能
    2017-07-07
  • jQuery弹出div层过2秒自动消失

    jQuery弹出div层过2秒自动消失

    这篇文章主要介绍了jQuery弹出div层过2秒自动消失的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-11-11
  • jQuery读取本地的json文件(实例讲解)

    jQuery读取本地的json文件(实例讲解)

    下面小编就为大家带来一篇jQuery读取本地的json文件(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 非常有用的40款jQuery 插件推荐（系列二）

    非常有用的40款jQuery 插件推荐（系列二）

    jQuery 是一个非常优秀的 JavaScript 框架，在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果，让网站有更好的可用性和用户体验
    2011-12-12
  • 关于juqery radio写法的兼容性问题(新老版本jquery)

    关于juqery radio写法的兼容性问题(新老版本jquery)

    最近经客户反映，页面某些效果无反应，经查找，发现juqery的写法有问题（jquery获取radio值）,主要是因为新版本修改了部分实现方式。
    2010-06-06
  • jQuery实现滚动切换的tab选项卡效果代码

    jQuery实现滚动切换的tab选项卡效果代码

    这篇文章主要介绍了jQuery实现滚动切换的tab选项卡效果代码,涉及jquery链式操作及样式动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )

    基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )

    基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )，需要的朋友可以参考下。
    2011-10-10

最新评论