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 相关文章推荐
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
使用Ajax实现进度条的绘制
Apr 07 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上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
JS实现简单日历特效
2020/01/03 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
Python编写一个优美的下载器
2018/04/15 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python类的实例化问题解决
2019/08/31 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Python安装OpenCV的示例代码
2020/03/05 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
小学班主任寄语大全
2014/04/04 职场文书
六五普法宣传标语
2014/10/06 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle