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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
JS中操作JSON总结
Dec 06 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
PHP缓存机制Output Control详解
2014/07/14 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
关于TypeScript模块导入的那些事
2018/06/12 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python面向对象编程基础解析(一)
2017/10/26 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
关于Python作用域自学总结
2019/06/10 Python
python 字典操作提取key,value的方法
2019/06/26 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
python如何更新包
2020/06/11 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
html5使用canvas画一条线
2014/12/15 HTML / CSS
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
C++是不是类型安全的
2014/02/18 面试题
为什么要使用servlet
2016/01/17 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
做人民满意的公务员活动方案
2014/08/25 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
Spring中的@Transactional的工作原理
2022/06/05 Java/Android