JSON使用方法

    JSON （ JavaScript Object Notation ）一种简单的数据格式，比 xml 更轻巧。 JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

JSON 的规则很简单： 对象是一个无序的“‘名称/ 值’对”集合。一个对象以“{ ”（左括号）开始，“} ”（右括号）结束。每个“名称”后跟一个“: ”（冒号）；“‘名称/ 值’ 对”之间使用“, ”（逗号）分隔。 具体细节参考http://www.json.org/json-zh.html

举个简单的例子：

js 代码

1.   function showJSON() {   
2.       var user =    
3.       {    
4.           "username":"andy",   
5.           "age":20,   
6.           "info": { "tel": "123456", "cellphone": "98765"},   
7.           "address":   
8.               [   
9.                   {"city":"beijing","postcode":"222333"},   
10.                   {"city":"newyork","postcode":"555666"}   
11.               ]   
12.       }   
13.          
14.       alert(user.username);   
15.       alert(user.age);   
16.       alert(user.info.cellphone);   
17.       alert(user.address[0].city);   
18.       alert(user.address[0].postcode);   
19.   }  

 

这表示一个user对象，拥有username, age, info, address 等属性。

同样也可以用JSON来简单的修改数据，修改上面的例子

js 代码

1.  function showJSON() {   
2.      var user =    
3.      {    
4.          "username":"andy",   
5.          "age":20,   
6.          "info": { "tel": "123456", "cellphone": "98765"},   
7.          "address":   
8.              [   
9.                  {"city":"beijing","postcode":"222333"},   
10.                  {"city":"newyork","postcode":"555666"}   
11.              ]   
12.      }   
13.         
14.      alert(user.username);   
15.      alert(user.age);   
16.      alert(user.info.cellphone);   
17.      alert(user.address[0].city);   
18.      alert(user.address[0].postcode);   
19.         
20.      user.username = "Tom";   
21.      alert(user.username);   
22.  } 

 

 JSON提供了json.js包，下载 http://www.json.org/json.js 后，将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。

js 代码

1.  function showCar() {   
2.      var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");   
3.      alert(carr.toJSONString());   
4.  }   
5.    
6.  function Car(make, model, year, color)       {   
7.       this.make  =  make;   
8.       this.model  =  model;   
9.       this.year  =  year;   
10.       this.color  =  color;   
11.  }   
12. 
    
13. 
    

可以使用 eval 来转换 JSON 字符到 Object

js 代码

1.  function myEval() {   
2.      var str = '{ "name": "Violet", "occupation": "character" }';   
3.      var obj = eval('(' + str + ')');   
4.      alert(obj.toJSONString());   
5.  }  

 

或者使用 parseJSON() 方法

js 代码

1.  function myEval() {   
2.      var str = '{ "name": "Violet", "occupation": "character" }';   
3.      var obj = str.parseJSON();   
4.      alert(obj.toJSONString());   
5.  }  

 

下面使用 prototype 写一个 JSON 的 ajax 例子。

先写一个 servlet (我的是servlet.ajax.JSONTest1.java) 就写一句话

java 代码

1. response.getWriter().print("{ /"name/": /"Violet/", /"occupation/": /"character/" }");  

再在页面中写一个 ajax 的请求

js 代码

1.  function sendRequest() {   
2.      var url = "/MyWebApp/JSONTest1";   
3.      var mailAjax = new Ajax.Request(   
4.          url,   
5.          {   
6.              method: 'get',   
7.              onComplete: jsonResponse   
8.          }   
9.      );   
10.  }   
11.    
12.  function jsonResponse(originalRequest) {   
13.      alert(originalRequest.responseText);   
14.      var myobj = originalRequest.responseText.parseJSON();   
15.      alert(myobj.name);   
16.  }   
17. 
    
18. 
    

prototype-1.5.1.js 中提供了 JSON 的方法， String.evalJSON(), 可以不使用json.js, 修改上面的方法

js 代码

1.  function jsonResponse(originalRequest) {   
2.      alert(originalRequest.responseText);   
3.      var myobj = originalRequest.responseText.evalJSON(true);   
4.      alert(myobj.name);   
5.  }  

 

JSON还提供了java的jar包 http://www.json.org/java/index.html API也很简单，下面举个例子

在javascript中填加请求参数

js 代码

1.  function sendRequest() {   
2.      var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");   
3.      var pars = "car=" + carr.toJSONString();   
4.    
5.      var url = "/MyWebApp/JSONTest1";   
6.      var mailAjax = new Ajax.Request(   
7.          url,   
8.          {   
9.              method: 'get',   
10.              parameters: pars,   
11.              onComplete: jsonResponse   
12.          }   
13.      );   
14.  }  

 

使用JSON请求字符串就可以简单的生成JSONObject并进行解析,修改 servlet 添加 JSON 的处理(要使用json.jar)

java 代码

1.  private void doService(HttpServletRequest request, HttpServletResponse response) 
2.        throws IOException {   
3.          String s3 = request.getParameter("car");   
4.          try {   
5.              JSONObject jsonObj = new JSONObject(s3);   
6.              System.out.println(jsonObj.getString("model"));   
7.              System.out.println(jsonObj.getInt("year"));   
8.          } catch (JSONException e) {   
9.              e.printStackTrace();   
10.          }   
11.          response.getWriter().print("{ /"name/":/"Violet/",/"occupation/":/"character/"}");   
12.      }   
13. 
    
14. 
    

同样可以使用 JSONObject 生成 JSON 字符串，修改 servlet

java 代码

1.  private void doService(HttpServletRequest request, HttpServletResponse response)
   
2.        throws IOException {   
3.          String s3 = request.getParameter("car");   
4.          try {   
5.              JSONObject jsonObj = new JSONObject(s3);   
6.              System.out.println(jsonObj.getString("model"));   
7.              System.out.println(jsonObj.getInt("year"));   
8.          } catch (JSONException e) {   
9.              e.printStackTrace();   
10.          }   
11.             
12.          JSONObject resultJSON = new JSONObject();   
13.          try {   
14.              resultJSON.append("name", "Violet")   
15.                        .append("occupation", "developer")   
16.                        .append("age", new Integer(22));   
17.              System.out.println(resultJSON.toString());   
18.          } catch (JSONException e) {   
19.              e.printStackTrace();   
20.          }   
21.          response.getWriter().print(resultJSON.toString());   
22.      }   
23. 
    
24. 
    

js 代码

1.  function jsonResponse(originalRequest) {   
2.      alert(originalRequest.responseText);   
3.      var myobj = originalRequest.responseText.evalJSON(true);   
4.      alert(myobj.name);   
5.      alert(myobj.age);   
6.  }