JSON (JavaScript Object Notation)一种简单的数据格式,比 xml 更轻巧,这篇文章主要介绍了 JS 中 Json 数据的处理和解析 JSON 数据的方法详解的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于 ECMAScript 的一个子集。 JSON 采用完全独立于语言的文本格式,但是也使用了类似于 C 语言家族的习惯(包括 C、C++、C#、Java、JavaScript、Perl、Python 等)。这些特性使 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成 (一般用于提升网络传输速率)。
JSON 的规则很简单: 对象是一个无序的 "'名称 / 值'对 "集合。一个对象以"{"(左括号)开始,"}"(右括号)结束。每个 "名称" 后跟一个 ":"(冒号);"'名称 / 值' 对 "之间使用","(逗号)分隔。具体细节参考 http://www.json.org/json-zh.html
举个简单的例子:
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 包 {aa0aa}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);
- }
下面在重点给大家介绍 JS 中 json 数据的处理
1、 json 数据结构 (对象和数组)
json 对象:var obj = {"name":"xiao","age":12};
json 数组:var objArray = [{"name":"xiao","age":12},{"name":"xiao","age":12}];
2、 处理 json 数据,依赖文件有:jQuery.js
3、Note:数据传输过程中,json 数据是以文本,即字符串格式形式存在;
JS 语言操作的是 JS 对象;
所以 json 字符串与 JS 对象之间的转换是关键;
4、数据格式
Json 字符串:var json_str = '{"name":"xiao","age":12}';
Josn 对象:var obj = {"name":"xiao","age":12};
JS 对象:Object {name:"xiao", age: 12}
5、类型转换
Json 字符串——>JS 对象,使用方法:
注明:
json_str、obj 代表的是在本文子标题 4 中的数据类型;
- obj = JSON.parse(json_str);
- obj = jQuery.parseJSON(json_str);
Note: 传入畸形 json 字符串 (例如:'{name:"xiao",age:12}'),会抛出异常;
Json 字符串格式,严格格式:'{"name":"xiao","age":12}'
JS 对象——>Json 字符串:
json_str = JSON. stringify(obj);
NOTE:
1、eval() 是 JS 原生函数,使用该形式:eval('('+'{name:"xiao",age:12}'+')'),并不安全, 无法保证类型转换为 JS 对象;
2、上面 3 中方法,都经过 chrome 浏览器测试,下面是测试结果截图;
Json 字符串——>JS 对象;
JS 对象——>Json 字符串:
来源: http://www.phperz.com/article/17/0329/264523.html