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 事件的一些重要说明
Oct 25 Javascript
Javascript的一种模块模式
Sep 08 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
javascript 数组操作详解
Jan 29 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 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企业级应用之常见缓存技术篇
2011/01/27 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
Js组件的一些写法
2010/09/10 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jQuery拖拽 & 弹出层 介绍与示例
2013/12/27 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中的并发编程实例
2014/07/07 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python看某个模块的版本方法
2018/10/16 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
工地资料员岗位职责
2013/12/31 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
商铺租赁意向书
2014/04/01 职场文书
家长通知书家长评语
2014/04/17 职场文书
企业标语口号
2014/06/10 职场文书
作风大整顿心得体会
2014/09/10 职场文书
小学生运动会报道稿
2014/09/12 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
mysql脏页是什么
2021/07/26 MySQL
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android