文档章节

jQuery操作json

iiiiiSKY
 iiiiiSKY
发布于 2015/12/21 22:38
字数 1186
阅读 242
收藏 23

前言

在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换、JSON数据的解析是关键。

先明确2个概念例如:

JSON字符串:

var str1 = '{ "name": "deyuyi", "sex": "man" }';

JSON对象:

var str2 = { "name": "deluyi", "sex": "man" };

 

可以简单这样理解:

JSON对象是直接可以使用JQuery操作的格式,如C#中可以用对象(类名)点出属性(方法)一样;

JSON字符串仅仅只是一个字符串,一个整体,不截取的话没办法取出其中存储的数据,不能直接使用,除非你只想alert()他;

 

一、JSON字符串转换为JSON对象

 

要使用上面的str1,必须使用下面的方法先转化为JSON对象:

 

A:eval函数

eval函数可以直接将本质符合或者近似符合JSON格式的字符串转换为JSON对象,使用方式如:

eval('(' + str + ')'); //其中str就是满足本标题描述的字符串

复制代码

    //由JSON字符串转换为JSON对象

    var str='{ "name": "John" }';    var obj = eval('(' + str + ')'); 
    alert( obj.name);    var str2="{ 'name': 'John' }";    var obj2 = eval('(' + str2 + ')'); 
    alert( obj2.name);    var str3="{ name: 'John' }";    var obj3 = eval('(' + str3 + ')'); 
    alert( obj3.name);

复制代码

以上均会输出结果“john”。

Eval方式可以转换以下标准和非标准格式字符串:

   var str="{ 'name': 'John' }";   var str2='{ "name": "John" }';   var str3="{ name: 'John' }";

参见本例下载包中:JqueryDemo1.html

 

B:parseJSON函数

另一种将标准字符串转换为JSON对象的函数是parseJSON(),使用方式如jQuery.parseJSON(str)//其中str就是满足本标题描述的字符串

    //由JSON字符串转换为JSON对象

    var str='{ "name": "John" }';    var obj = jQuery.parseJSON(str)
    alert("1"+ obj.name);

以上均会输出结果“john”。

此种方式仅支持标准格式:var str='{ "name": "John" }';

参见本例下载包中:JqueryDemo2.html

 

C:JSON.parse函数

还有一种将标准字符串转换为JSON对象的函数是JSON.parse(),使用方式如JSON.parse(str)//其中str就是满足本标题描述的字符串

        var str = '{ "name": "mady", "age": "24" }';        var obj = JSON.parse(str);
        alert(obj.name);

以上均会输出结果“john”。

此种方式仅支持标准格式:var str='{ "name": "John" }';

参见本例下载包中:JqueryDemo3.html

 

以上结果一致,均输出姓名,如下图:

clip_image002

 

特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。

D:Other方式

 

如果忍不住想犯错,十分十分想解析非标准、非正规字符串,如:

      {name:mady,age:23}

或者

      {name:’mady’,age:23}

以及其他的你能想到的各种本质正确的非法格式,那么有扩展库可以解决

jquery-json 扩展库

下载地址在这里:http://code.google.com/p/jquery-json/

这个库用来扩展 jQuery ,对于 JSON 的使用,扩展了两个函数:toJSONparseJSON

toJSON 函数用来将一个普通的 JavaScript 对象序列化为 JSON 对象。

parseJSON函数用来将一个普通的 JavaScript 对象序列化为 JSON 对象too。

复制代码

      var data=$.toJSON({ x: 2, y: 3 });

      var obj = jQuery.parseJSON(data);

      alert(obj.x);

      var str = {plugin: 'jquery-json', version: 2.3};

      var data2=$.toJSON(str);

      var obj2 = jQuery.parseJSON(data2);

      alert(obj2.plugin);

复制代码

以上代码执行结果如:

imageclip_image004

参见本例下载包中:JqueryDemo5.html

 

二、将JSON对象转换为字符串

可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。

例如:

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);

三、解析读取JSON

我们通过各种方式将字符串转换为JSON对象后就是解析他了。

如上面的例子:

      var str2 = { "name": "mady", "sex": "man" };

就可以这样读取:

      alert(str2.name);//和C#一样直接往出点…

弹出” mady”。

我们遇到的JSON很少有这么简单的,比如复杂一点的JSON对象如:

      var str={"GetUserPostByIdResult":{"Age":"33","ID":"2server","Name":"mady"}};

解析用:

      alert(str.GetUserPostByIdResult.Name);//一次点不出来,我多点几次

弹出:”mady”。

再再复杂一点的如:

      var data=" { root: [ {'name':'6200','value':'0'}, {'name':'6101','value':'xa'}, {'name':'6102','value':'beijing'}, {'name':'6103','value':'haerbin'}]}";

如果你想单挑的话,解析用:

      alert(dataObj.root[0].name);

弹出:“6200”。

如果你想群挑的话,解析用:

      $.each(dataObj.root, function(index, item) {
            $("#info").append(                    "<div>" +index+":"+ item.name + "</div>" + 
                    "<div>" +index+":"+ item.value + "</div><hr/>");
        });

其中这个“#info”是个DIV的ID。输入结果如下图:

 

clip_image006

参见本例下载包中:JqueryDemo4.html

注意:本例如果要使用其他转换函数请更改字符串内单引号为双引号,外引号为单引号。

本文章所有代码:点击下载


本文转载自:http://www.cnblogs.com/madyina/p/3448518.html

下一篇: json
iiiiiSKY
粉丝 3
博文 42
码字总数 2819
作品 0
程序员
私信 提问
加载中

评论(2)

Bubblehead_Y
Bubblehead_Y
test
郭大鹏
郭大鹏
这么晚了还写文,真是辛苦了。
Zepto.js简介(第二章)

接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 zepto同jquery不同的API attr同pro...

张靖bibibi
2018/06/22
0
0
Struts2 整合jQuery实现Ajax功能

Struts2 整合jQuery实现Ajax功能 技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美。 首先明确个概念: jQuery是什么:是...

孙斐
2011/10/12
9.2K
2
jQuery零基础入门——(八)AJAX

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 用JavaScript写AJAX前面已经介绍...

JandenMa
2018/08/06
35
0
jquery 解析json与json 例子

jquery处理网页特效on的方法 jquery处理json的方法是直接eval,给一个变量,但是,今天看到其源代码,证明我的想法彻底错了。   它先判定有没有window.json.parse这个方法,如果有,直接用...

xiahuawuyu
2012/06/20
1K
0
jQuery中的Ajax----02

一、$.getScript()方法 有时候,在页面初次加载时就得所需的全部javascript文件是完全没有必要的。虽然可以在需要哪个javascript文件时,动态地创建<script>标签,jquery代码如下: $(docu...

指尖跳动的精灵
2015/03/09
36
0

没有更多内容

加载失败,请刷新页面

加载更多

vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础

作者 | Jeskson 来源 | 达达前端小酒馆 Vue概述: MVX模式简介,Vue框架简介,Vue.js的安装与使用。 Vue基础语法: 实例对象,生命周期,模板语法,计算属性,methods方法 Vue渲染: 列表渲染...

达达前端小酒馆
今天
4
0
OSChina 周五乱弹 —— 匹诺曹也是韩国人

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @watergood :分享海先生的单曲《烟花巷》 《烟花巷》- 海先生 手机党少年们想听歌,请使劲儿戳(这里) @Cyber-Pan :已经很久没有十点前下过...

小小编辑
今天
8
1
Snack3 之 Jsonpath使用

Snack3 之 Jsonpath使用 一、 Snack3 和 JSONPath 介绍 Snack3 是一个支持JSONPath的JSON框架。JSONPath是一个很强大的功能,也可以在Java框架中当作对象查询语言(OQL)来使用。 <dependenc...

刘之西东
今天
5
0
7. 彤哥说netty系列之Java NIO核心组件之Selector

<p align="right">——日拱一卒,不期而至!</p> 你好,我是彤哥,本篇是netty系列的第七篇。 简介 上一章我们一起学习了Java NIO的核心组件Buffer,它通常跟Channel一起使用,但是它们在网络...

彤哥读源码
昨天
21
0
在Jupyter notebooks 中运行GRASS GIS

在Ubuntu16.04中,首先安装jupyter: python3 -m pip install --upgrade pippython3 -m pip install jupyter 然后创建一个sh脚本: # directory where GRASS GIS lives# GRASS GIS 的安装......

ddd口木呆
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部