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 相关文章推荐
简单的js分页脚本
May 21 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
localStorage实现便签小程序
Nov 28 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
原生js实现随机点餐效果
Dec 10 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
React配置子路由的实现
Jun 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 采集心得技巧
2009/05/15 PHP
php修改时间格式的代码
2011/05/29 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
基于header的一些常用指令详解
2013/06/06 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python第三方库学习笔记
2020/02/07 Python
基于python3的socket聊天编程
2020/02/17 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
《小石潭记》教学反思
2014/02/13 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
环境卫生倡议书
2014/08/29 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
文员岗位职责范本
2015/04/16 职场文书
美容院员工规章制度
2015/08/05 职场文书
golang中的空slice案例
2021/04/27 Golang
python如何正确使用yield
2021/05/21 Python