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


Posted in Javascript onMay 29, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 #Javascript
jQuery实现返回顶部效果的方法
May 29 #Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 #Javascript
Jquery动态添加输入框的方法
May 29 #Javascript
jquery任意位置浮动固定层插件用法实例
May 29 #Javascript
JQuery控制Radio选中方法分析
May 29 #Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 #Javascript
You might like
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
PHP多线程类及用法实例
2014/12/03 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Python找出最小的K个数实例代码
2018/01/04 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python mock测试的示例
2020/10/19 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
求职推荐信范文
2013/12/01 职场文书
大学校园活动策划书
2014/02/04 职场文书
致裁判员加油稿
2014/02/08 职场文书
行政主管职责范本
2014/03/07 职场文书
总账会计岗位职责
2014/03/13 职场文书
有关爱国演讲稿
2014/05/07 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
户外拓展训练感想
2015/08/07 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python