JS中Json数据的处理和解析JSON数据的方法详解


Posted in Javascript onJune 29, 2016

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。

JSON的规则很简单: 对象是一个无序的“‘名称/值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间使用“,”(逗号)分隔。具体细节参考http://www.json.org/json-zh.html

举个简单的例子:

js 代码

function showJSON() { 
var user = 
{ 
"username":"andy", 
"age":20, 
"info": { "tel": "123456", "cellphone": "98765"}, 
"address": 
[ 
{"city":"beijing","postcode":"222333"}, 
{"city":"newyork","postcode":"555666"} 
] 
} 
alert(user.username); 
alert(user.age); 
alert(user.info.cellphone); 
alert(user.address[0].city); 
alert(user.address[0].postcode); 
}

这表示一个user对象,拥有username, age, info, address 等属性。

同样也可以用JSON来简单的修改数据,修改上面的例子

js 代码

function showJSON() { 
var user = 
{ 
"username":"andy", 
"age":20, 
"info": { "tel": "123456", "cellphone": "98765"}, 
"address": 
[ 
{"city":"beijing","postcode":"222333"}, 
{"city":"newyork","postcode":"555666"} 
] 
} 
alert(user.username); 
alert(user.age); 
alert(user.info.cellphone); 
alert(user.address[0].city); 
alert(user.address[0].postcode); 
user.username = "Tom"; 
alert(user.username); 
}

JSON提供了json.js包,下载http://www.json.org/json.js 后,将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。

js 代码

function showCar() { 
var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); 
alert(carr.toJSONString()); 
} 
function Car(make, model, year, color) { 
this.make = make; 
this.model = model; 
this.year = year; 
this.color = color; 
}

可以使用eval来转换JSON字符到Object

js 代码

function myEval() { 
var str = '{ "name": "Violet", "occupation": "character" }'; 
var obj = eval('(' + str + ')'); 
alert(obj.toJSONString()); 
}

或者使用parseJSON()方法

js 代码

function myEval() { 
var str = '{ "name": "Violet", "occupation": "character" }'; 
var obj = str.parseJSON(); 
alert(obj.toJSONString()); 
}

下面使用prototype写一个JSON的ajax例子。

先写一个servlet (我的是servlet.ajax.JSONTest1.java)就写一句话

java 代码

response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");

再在页面中写一个ajax的请求

js 代码

function sendRequest() { 
var url = "/MyWebApp/JSONTest1"; 
var mailAjax = new Ajax.Request( 
url, 
{ 
method: 'get', 
onComplete: jsonResponse 
} 
); 
} 
function jsonResponse(originalRequest) { 
alert(originalRequest.responseText); 
var myobj = originalRequest.responseText.parseJSON(); 
alert(myobj.name); 
}

prototype-1.5.1.js中提供了JSON的方法,String.evalJSON(), 可以不使用json.js, 修改上面的方法

js 代码

function jsonResponse(originalRequest) { 
alert(originalRequest.responseText); 
var myobj = originalRequest.responseText.evalJSON(true); 
alert(myobj.name); 
}

JSON还提供了java的jar包 http://www.json.org/java/index.html API也很简单,下面举个例子

在javascript中填加请求参数

js 代码

function sendRequest() { 
var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); 
var pars = "car=" + carr.toJSONString(); 

var url = "/MyWebApp/JSONTest1"; 
var mailAjax = new Ajax.Request( 
url, 
{ 
method: 'get', 
parameters: pars, 
onComplete: jsonResponse 
} 
); 
}

使用JSON请求字符串就可以简单的生成JSONObject并进行解析,修改servlet添加JSON的处理(要使用json.jar)

java 代码

private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException { 
String s3 = request.getParameter("car"); 
try { 
JSONObject jsonObj = new JSONObject(s3); 
System.out.println(jsonObj.getString("model")); 
System.out.println(jsonObj.getInt("year")); 
} catch (JSONException e) { 
e.printStackTrace(); 
} 
response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }"); 
}

同样可以使用JSONObject生成JSON字符串,修改servlet

java 代码

private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException { 
String s3 = request.getParameter("car"); 
try { 
JSONObject jsonObj = new JSONObject(s3); 
System.out.println(jsonObj.getString("model")); 
System.out.println(jsonObj.getInt("year")); 
} catch (JSONException e) { 
e.printStackTrace(); 
} 
JSONObject resultJSON = new JSONObject(); 
try { 
resultJSON.append("name", "Violet") 
.append("occupation", "developer") 
.append("age", new Integer(22)); 
System.out.println(resultJSON.toString()); 
} catch (JSONException e) { 
e.printStackTrace(); 
} 
response.getWriter().print(resultJSON.toString()); 
}

js 代码

function jsonResponse(originalRequest) { 
alert(originalRequest.responseText); 
var myobj = originalRequest.responseText.evalJSON(true); 
alert(myobj.name); 
alert(myobj.age); 
}

下面在重点给大家介绍JS中json数据的处理

1、 json数据结构(对象和数组)

json对象:var obj = {"name":"xiao","age":12};

json数组:var objArray = [{"name":"xiao","age":12},{"name":"xiao","age":12}];

2、 处理json数据,依赖文件有:jQuery.js

3、Note:数据传输过程中,json数据是以文本,即字符串格式形式存在;

JS语言操作的是JS对象;

所以json字符串与JS对象之间的转换是关键;

4、数据格式

Json字符串:var json_str = ‘{"name":"xiao","age":12}';

Josn对象:var obj = {"name":"xiao","age":12};

JS对象:Object {name: "xiao", age: 12}

5、类型转换

Json字符串——>JS对象,使用方法:

注明:

json_str、obj代表的是在本文子标题4中的数据类型;

obj = JSON.parse(json_str);
obj = jQuery.parseJSON(json_str);

Note:传入畸形json字符串(例如:‘{name:"xiao",age:12}'),会抛出异常;

Json字符串格式,严格格式:‘{"name":"xiao","age":12}'

JS对象——>Json字符串:

json_str = JSON. stringify(obj);

NOTE:

1、eval()是JS原生函数,使用该形式:eval(‘('+‘{name:"xiao",age:12}'+')'),并不安全,无法保证类型转换为JS对象;

2、上面3中方法,都经过chrome浏览器测试,下面是测试结果截图;

Json字符串——>JS对象;

JS中Json数据的处理和解析JSON数据的方法详解

JS对象——>Json字符串:

JS中Json数据的处理和解析JSON数据的方法详解

Javascript 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
jquery提示 "object expected"的解决方法
Dec 13 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
js实现图片360度旋转
Jan 22 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 #Javascript
js精准的倒计时函数分享
Jun 29 #Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 #Javascript
RequireJS多页面应用实例分析
Jun 29 #Javascript
全面了解JS中的匿名函数
Jun 29 #Javascript
大型JavaScript应用程序架构设计模式
Jun 29 #Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 #Javascript
You might like
图形数字验证代码
2006/10/09 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python高效编程技巧
2013/01/07 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
五四青年节活动总结
2015/02/10 职场文书
配置Kubernetes外网访问集群
2022/03/31 Servers
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
Python数组变形的几种实现方法
2022/05/30 Python