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 相关文章推荐
javascript复制对象使用说明
Jun 28 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
js获取微信版本号的方法
May 12 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
python基础教程之缩进介绍
2014/08/29 Python
跟老齐学Python之print详解
2014/09/28 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
枚举与#define宏的区别
2014/04/30 面试题
医大实习自我鉴定
2013/12/07 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
学生喝酒检讨书
2014/02/06 职场文书
开工仪式策划方案
2014/05/23 职场文书
市场营销工作计划书
2014/09/15 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
团日活动总结格式
2015/05/11 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL
vue实现登陆页面开发实践
2022/05/30 Vue.js