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 AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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 url路由入门实例
2014/04/23 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
python简易远程控制单线程版
2018/06/20 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
Python内存映射文件读写方式
2020/04/24 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
自我鉴定思想方面
2013/10/07 职场文书
中国梦读书活动总结
2014/07/10 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
新党章的学习心得体会
2014/11/07 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android