javascript JSON操作入门实例


Posted in Javascript onApril 16, 2010

JSON的规则很简单: 对象是一个无序的“‘名称/值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值' 对”之间使用“,”(逗号)分隔。具体细节参考http://www.json.org/json-zh.html
这篇有个入门的文章,也可以参考下 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, 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); 
}
Javascript 相关文章推荐
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
javascript对象之内置对象Math使用方法
Apr 16 #Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 #Javascript
jQuery maxlength文本字数限制插件
Apr 16 #Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 #Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 #Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 #Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 #Javascript
You might like
php对数组内元素进行随机调换的方法
2015/05/12 PHP
jQuery语法总结和注意事项小结
2012/11/11 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
VSCode launch.json配置详细教程
2020/06/18 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
小学教师自我鉴定范文
2014/03/20 职场文书
作风建设演讲稿
2014/05/23 职场文书
民族学专业求职信
2014/07/28 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
Python道路车道线检测的实现
2021/06/27 Python
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫