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 serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 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编程函数安全篇
2013/01/08 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php 使用array函数实现分页
2015/02/13 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
Knockout visible绑定使用方法
2013/11/15 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python字符串连接的N种方式总结
2014/09/17 Python
使用python加密自己的密码
2015/08/04 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python3.8中使用f-strings调试
2019/05/22 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
J2EE模式面试题
2016/10/11 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
无偿献血倡议书
2014/04/14 职场文书
土地转让协议书
2014/04/15 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python