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随机展示头像代码
Dec 21 Javascript
详解javascript遍历方式
Nov 11 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
Dec 19 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
Javascript函数的参数
2015/07/16 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
python 将md5转为16字节的方法
2018/05/29 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
一年级语文下册复习计划
2015/01/17 职场文书
中标通知书
2015/04/17 职场文书
学生会干部任命书
2015/09/21 职场文书
同学聚会开幕词
2019/04/02 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书