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 相关文章推荐
juqery 学习之四 筛选过滤
Nov 30 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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定时发送服务的解决办法
2017/04/23 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
动态加载js的几种方法
2006/10/23 Javascript
Prototype使用指南之array.js
2007/01/10 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
浅谈js原生拖放
2016/11/21 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python3实现转换Image图片格式
2018/06/21 Python
python实现ip代理池功能示例
2019/07/05 Python
Python对列表的操作知识点详解
2019/08/20 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
使用K.function()调试keras操作
2020/06/17 Python
浅谈Python3中print函数的换行
2020/08/05 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
物流创业计划书
2014/02/01 职场文书
狼和鹿教学反思
2014/02/05 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis