簡單Json實例——基於JQuery框架Ajax支持的Json操作——J2EE版本


  Json這個東西很神奇,大家都知道。通過網絡傳遞信息時,字符(串)是很好的選擇,我們在客戶和服務器兩端構建的對象,通過拆解為字符串的形式而互相傳輸。所以我更願意把Json理解為一種手段或者模式,目的是實現對象和字符串的轉換。

  因為我們適應了面向對象的程序編輯,所以我們希望在頁面的信息處理時,也能夠使用對象屬性方便的操作。通過json,我們能夠將服務器通過網絡傳遞到客戶端的字符串解析為對象,在客戶端本地通過對象手法進行操作。

  比如下面:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3  <head>
 4   <title> JsonCase </title>
 5  </head>
 6 
 7  <body>
 8   <script type="text/javascript">
 9     // e.g.1
10     // 這種方式似乎只能用[]數組才能成功轉換
11     var stu = eval("[{'name':'nn'}]");
12     alert(stu[0].name);
13     // e.g.2
14     eval("var stu1 = {'name':'mm'}");
15     alert(stu1.name);
16   </script>
17  </body>
18 </html>

  

  json說簡單也簡單,上面就是很好的例子。

  當我們有很復雜的對象和字符串需要互相轉換時,我們就需要一些第三方的幫助。

 

  我們需要一些jar包來幫助我們實現復雜Json轉換,比如數組、XML等高級、復雜的轉換。

  

  組件名        下載地址        
  BeanUtils       http://commons.apache.org/beanutils/download_beanutils.cgi 
  Collections        http://commons.apache.org/collections/download_collections.cgi  
  Lang            http://commons.apache.org/lang/download_lang.cgi   
  Logging        http://commons.apache.org/logging/download_logging.cgi   
  EZMorph        ezmorph.sourceforge.net/(這個是項目主頁,但是sourceforge在奧運期間被和諧……)
  Json-lib        sourceforge.net/projects/json-lib/files/(sourceforge被和諧,怨念……)

  XOM         http://www.xom.nu/(如果需要實現JSON和XML之間的轉換等,就必要)  

  JQuery       http://jquery.com/

  以上的jar包我下載打包了,大家可以移步到這里下載(不包括JQuery)。

  然后我們再取得JQuery,當然,這更加不是必要的。

  小例子:

  

  我在index.jsp里有一個下拉框,在獲得焦點時利用ajax發送異步請求從服務器獲取數據,這里也利用了一些json的東西。

  servlet我配置為攔截value.get。

  我把代碼貼上來大家稍微看一看,這些是十分基礎的東西,只對和我一樣的初學者做一個參考和備忘。

  index.jsp:

 1 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
 2 <%
 3     String path = request.getContextPath();
 4     String basePath = request.getScheme() + "://"
 5             + request.getServerName() + ":" + request.getServerPort()
 6             + path + "/";
 7 %>
 8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 9 <html>
10 <head>
11 <title>JsonCase</title>
12 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
13 <script type="text/javascript">
14     $(function($) {
15         $("#record").append("當前測試頁面完成加載。<br/>");
16     });
17     function getFirstFloorValue(element) {
18         $("#record").append("<br/>獲取到信息:您將要取得第一級選項信息……");
19         $("#record").append("<br/>正在使用ajax為您獲取數據,您可以繼續停留在頁面並進行其他操作。");
20         $.ajax({
21             url : "value.get",
22             type : "POST",
23             data : "action=GetFirstFloorValue",
24             datatype : "json",
25             success : function(data) {
26                 $("#record").append("<br/>操作成功,正在為您准備數據……");
27                 $(element).empty();
28                 $("#record").append("<br/>清除原始數據成功!");
29                 var ops = $.parseJSON(data);
30                 $("#record").append("<br/>即時數據准備成功!");
31                 for ( var i = 0; i < ops.length; i++)
32                     $(element).append(
33                             "<option value=\"" + ops[i] + "\">" + ops[i]
34                                     + "</option>");
35                 $("#record").append("<br/>更新列表成功!<br/>");
36             }
37         });
38         
39         // 相比之下,此方法比上面的方法更加簡潔,上面的方法具有更好的可控性
40         /*$.getJSON("value.get", {
41             "action" : "GetFirstFloorValue"
42         }, function(data) {
43             var ml = "";
44             $(data).each(function(i) {
45                 ml += "<option value="+ data[i] +">" + data[i] + "</option>";
46             });
47             $(element).html(ml);
48         });*/
49     }
50 </script>
51 </head>
52 
53 <body>
54     <div>
55         <h3>
56             此處演示使用JQuery框架ajax支持的Json來實現下來列表即時取值: <br />
57             本實例為單個列表的值傳遞,使用簡單json來實現 <br /> 點擊會使用ajax異步從服務器取得數據取值
58         </h3>
59         <select id="select1" onfocus=getFirstFloorValue(this)>
60             <option value="1">點擊取值</option>
61         </select>
62     </div>
63     <dir>
64         <h3>此處顯示一些記錄信息:</h3>
65         <span id="record"></span>
66     </dir>
67 </body>
68 </html>

  ValueGetController.java:

 1 package servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 
11 import net.sf.json.JSONArray;
12 
13 public class ValueGetController extends HttpServlet {
14 
15     private static final long serialVersionUID = -1293610555518403602L;
16 
17     public void doGet(HttpServletRequest request, HttpServletResponse response)
18             throws ServletException, IOException {
19 
20         doPost(request, response);
21     }
22 
23     public void doPost(HttpServletRequest request, HttpServletResponse response)
24             throws ServletException, IOException {
25 
26         request.setCharacterEncoding("GBK");
27         response.setContentType("text/html;charset=gbk");
28         PrintWriter out = response.getWriter();
29         String action = request.getParameter("action");
30         if (action.equals("GetFirstFloorValue")) {
31             String[] str = GetFirstFloorValue();
32             JSONArray ja = JSONArray.fromObject(str);
33             String json = ja.toString();
34             out.print(json);
35             System.out.println(json);
36             out.flush();
37             out.close();
38             return;
39         }
40         out.flush();
41         out.close();
42     }
43 
44     private String[] GetFirstFloorValue() {
45         String[] str = new String[4];
46         str[0] = "桌面應用";
47         str[1] = "移動設備";
48         str[2] = "服務器端";
49         str[3] = "嵌入式開發";
50         return str;
51     }
52 
53 }

  做法和流程就是使用第三方jar包和JQuery框架提供的方法,我在界面通過JQuery的ajax發起異步ajax請求,服務器返回的json格式字符串再交由JQuery解析,轉化為javascript對象便於我們通過對象手法操作。此例十分簡單,也沒有xml操作。但是做一個備忘是足夠了。

 

 歡迎您移步我們的交流群,無聊的時候大家一起打發時間:Programmer Union

 或者通過QQ與我聯系:點擊這里給我發消息

 (最后編輯時間2012-08-07 17:59:53)

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM