jQuery怎么解析Json字符串(Json格式/Json对象)


Posted in Javascript onAugust 09, 2013

json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法。

我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法。

上例中得到的JSON数据如下,是一个嵌套JSON:

{
 "comments": [
  {
   "content": "很不错嘛",
   "id": 1,
   "nickname": "纳尼"
  },
  {
   "content": "哟西哟西",
   "id": 2,
   "nickname": "小强"
  }
 ]
}

获取JSON数据,在jQuery中有一个简单的方法 $.getJSON() 可以实现。

下面引用的是官方API对$.getJSON()的说明:

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )
urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

回调函数中接受三个参数,第一个书返回的数据,第二个是状态,第三个是jQuery的XMLHttpRequest,我们只使用到第一个参数。

$.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“)。

上例的运行结果如下:

jQuery怎么解析Json字符串(Json格式/Json对象)

如果返回的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,十分方便。

上例的运行效果:

jQuery怎么解析Json字符串(Json格式/Json对象)

jQuery很强大,so...更多的了解还得参考文档,(ˇˍˇ) 想~

下面是其他网友的补充:

一、jQuery解析Json数据格式:

使用这种方法,你必须在Ajax请求中设置参数:
1 dataType: "json"
获取通过回调函数返回的数据并解析得到我们想要的值,看源码:

jQuery.ajax({ 
url: full_url, 
dataType: "json", 
success: function(results) { 
alert(result.name); 
} });

通常情况下,你可以从后台返回JSON数据,前台就交给jQuery啦,哈哈!!
jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.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); 
}); 
});

二、jQuery解析Json对象:

jQuery提供了另一种方法“parseJSON”,这需要一个标准的JSON字符串,并返回生成的JavaScript对象。让我们来看
看语法:

data = $.parseJSON(string);
看看它是如何运用的到实际开发中的:

jQuery.ajax({ 
url: dataURL, success: function(results) { 
var parsedJson = jQuery.parseJSON(results); 
alert(parsedJson.name); 
} 
});
Javascript 相关文章推荐
javascript是怎么继承的介绍
Jan 05 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 #Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 #Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 #Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 #Javascript
jquery 实现上下滚动效果示例代码
Aug 09 #Javascript
15条JavaScript最佳实践小结
Aug 09 #Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 #Javascript
You might like
文件上传程序的全部源码
2006/10/09 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
简单谈谈json跨域
2016/03/13 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python tkinter事件高级用法实例
2018/01/31 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
仓库管理制度
2014/01/21 职场文书
个人委托书怎么写
2014/04/04 职场文书
自荐信范文
2019/05/20 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL