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 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
微信小程序 标签传入数据
May 08 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
js瀑布流布局的实现
Jun 28 Javascript
微信小程序实现倒计时功能
Nov 19 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与javascript的两种交互方式
2006/10/09 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php简单实现MVC
2015/02/05 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
jQuery的三种$()
2009/12/30 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
javascript arguments使用示例
2014/12/16 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
深入了解NumPy 高级索引
2020/07/24 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
读书活动实施方案
2014/03/10 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang