Struts2+JQuery+Json實例

時間  2019-11-29
標籤 struts2+jquery+json struts jquery json 實例 欄目 Struts 简体版
原文   原文鏈接

 

結合使用jQuery和Json的話感受不錯，操做上來講很方便，先簡單說說Json的一些優勢，固然Json不單單這些優勢。javascript

1.方便前臺數據的操做。html

2.數據體積小，傳輸快。java

3.客戶端操縱XML的時候須要建立ActiveX對象，Json則徹底就是一個JS對象，它不須要建立DOM。jquery

下面是一個簡單的例子，你們能夠參考一下，主要功能有：1.獲取js值、2.獲取單個值、3.獲取對象值、4.獲取List對象、5.獲取Map對象。ajax

具體代碼以下：apache

先看看控制器Action的代碼。JsonJqueryStruts2Action.java：json

[java] view plain copy print ?
  1. package struts2jsonjquery.test.action;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.HashMap;  
  5. import java.util.List;  
  6. import java.util.Map;  
  7.   
  8. import struts2jsonjquery.test.entity.UserInfo;  
  9.   
  10. import com.opensymphony.xwork2.ActionSupport;  
  11.   
  12. public class JsonJqueryStruts2Action extends ActionSupport {  
  13.   
  14.     private static final long serialVersionUID = 3518833679938898354L;  
  15.       
  16.     private String message;     //使用json返回單個值   
  17.     private UserInfo userInfo;      //使用json返回對象   
  18.     private List<UserInfo> userInfosList;     //使用josn返回List對象   
  19.     private Map<String,UserInfo> userInfosMap;    //使用json返回Map對象   
  20.     /** 
  21.      * <p> 
  22.      *  返回單個值 
  23.      * <p> 
  24.      * @return 
  25.      */  
  26.     public String returnMessage(){  
  27.         this.message = "成功返回單個值:楊金德";  
  28.         return "message";  
  29.     }  
  30.     /** 
  31.      * <p> 
  32.      *  返回UserInfo對象 
  33.      * </p> 
  34.      * @return 
  35.      */  
  36.     public String returnUserInfo(){  
  37.         userInfo = new UserInfo();  
  38.         userInfo.setUserId(10000);  
  39.         userInfo.setUserName("柳夢璃");  
  40.         userInfo.setPassword("liumengli");  
  41.         return "userInfo";  
  42.     }  
  43.     /** 
  44.      * <p> 
  45.      *  返回List對象 
  46.      * </p> 
  47.      * @return 
  48.      */  
  49.     public String returnList(){  
  50.         userInfosList = new ArrayList<UserInfo>();  
  51.         UserInfo u1 = new UserInfo();  
  52.         u1.setUserId(10000);  
  53.         u1.setUserName("柳夢璃");  
  54.         u1.setPassword("liumengli");  
  55.         UserInfo u2 = new UserInfo();  
  56.         u2.setUserId(10001);  
  57.         u2.setUserName("韓菱紗");  
  58.         u2.setPassword("hanlingsha");  
  59.         UserInfo u3 = new UserInfo();  
  60.         u3.setUserId(10002);  
  61.         u3.setUserName("雲天河");  
  62.         u3.setPassword("yuntianhe");  
  63.         UserInfo u4 = new UserInfo();  
  64.         u4.setUserId(10003);  
  65.         u4.setUserName("玄霄");  
  66.         u4.setPassword("xuanxiao");  
  67.         userInfosList.add(u1);  
  68.         userInfosList.add(u2);  
  69.         userInfosList.add(u3);  
  70.         userInfosList.add(u4);  
  71.         return "list";  
  72.     }  
  73.     /** 
  74.      * <p> 
  75.      *  返回Map對象 
  76.      * </p> 
  77.      * @return 
  78.      */  
  79.     public String returnMap(){  
  80.         userInfosMap = new HashMap<String,UserInfo>();  
  81.         UserInfo u1 = new UserInfo();  
  82.         u1.setUserId(10000);  
  83.         u1.setUserName("林月如");  
  84.         u1.setPassword("linyueru");  
  85.         UserInfo u2 = new UserInfo();  
  86.         u2.setUserId(10001);  
  87.         u2.setUserName("趙靈兒");  
  88.         u2.setPassword("zhaolinger");  
  89.         UserInfo u3 = new UserInfo();  
  90.         u3.setUserId(10002);  
  91.         u3.setUserName("李逍遙");  
  92.         u3.setPassword("lixiaoyao");  
  93.         UserInfo u4 = new UserInfo();  
  94.         u4.setUserId(10003);  
  95.         u4.setUserName("女媧");  
  96.         u4.setPassword("nvwa");  
  97.         userInfosMap.put(u1.getUserId()+"", u1);  
  98.         userInfosMap.put(u2.getUserId()+"", u2);  
  99.         userInfosMap.put(u3.getUserId()+"", u3);  
  100.         userInfosMap.put(u4.getUserId()+"", u4);  
  101.         return "map";  
  102.     }  
  103.     /** 
  104.      * <p> 
  105.      *  得到對象，也就是經過表達得到對象(異步的) 
  106.      * </P> 
  107.      * @return 
  108.      */  
  109.     public String gainUserInfo(){  
  110.         System.out.println("用戶ID："+userInfo.getUserId());  
  111.         System.out.println("用戶名："+userInfo.getUserName());  
  112.         System.out.println("密碼："+userInfo.getPassword());  
  113.         return "userInfo";  
  114.     }  
  115.     public String getMessage() {  
  116.         return message;  
  117.     }  
  118.     public void setMessage(String message) {  
  119.         this.message = message;  
  120.     }  
  121.     public UserInfo getUserInfo() {  
  122.         return userInfo;  
  123.     }  
  124.     public void setUserInfo(UserInfo userInfo) {  
  125.         this.userInfo = userInfo;  
  126.     }  
  127.     public List<UserInfo> getUserInfosList() {  
  128.         return userInfosList;  
  129.     }  
  130.     public void setUserInfosList(List<UserInfo> userInfosList) {  
  131.         this.userInfosList = userInfosList;  
  132.     }  
  133.     public Map<String, UserInfo> getUserInfosMap() {  
  134.         return userInfosMap;  
  135.     }  
  136.     public void setUserInfosMap(Map<String, UserInfo> userInfosMap) {  
  137.         this.userInfosMap = userInfosMap;  
  138.     }  
  139. }  


struts2的配置文件也很簡單，須要注意的是得把type設置爲json類型。struts.xml：服務器

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC  
  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
  4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
  5.   
  6. <struts>  
  7.     <constant name="struts.custom.i18n.resources" value="UTF-8"/>  
  8.     <package name="default" namespace="/" extends="json-default">  
  9.         <action name="jsontest" class="struts2jsonjquery.test.action.JsonJqueryStruts2Action">  
  10.             <!-- 返回單個值的result -->  
  11.             <result name="message" type="json"></result>  
  12.             <!-- 返回UserInfo對象的 -->  
  13.             <result name="userInfo" type="json"></result>  
  14.             <!-- 返回List對象的 -->  
  15.             <result name="list" type="json"></result>  
  16.             <!-- 返回Map對象的 -->  
  17.             <result name="map" type="json"></result>  
  18.         </action>  
  19.     </package>  
  20. </struts>  


前臺Jsp提供幾個點擊按鈕事件，固然這個Jsp須要引入jQuer.js文件。index.jsp：app

[html] view plain copy print ?
  1. <%@ page language="java" pageEncoding="GBK"%>  
  2. <%@ taglib uri="/struts-tags" prefix="s" %>  
  3. <%  
  4.     String path = request.getContextPath();  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.       
  11.     <title>Struts2+JQuery+JSON</title>  
  12.     <meta http-equiv="pragma" content="no-cache">  
  13.     <meta http-equiv="cache-control" content="no-cache">  
  14.     <meta http-equiv="expires" content="0">      
  15.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  16.     <meta http-equiv="description" content="This is my page">  
  17.     <script type="text/javascript" src="<%=path %>/js/jquery.js"></script>  
  18.     <script type="text/javascript" src="<%=path %>/js/json.js"></script>  
  19.   </head>  
  20.     
  21.   <body>  
  22.     <input id="getJsData" type="button" value="獲取js值"/>    
  23.     <input id="getMessage" type="button" value="獲取單個值"/>    
  24.     <input id="getUserInfo" type="button" value="獲取UserInfo對象"/>    
  25.     <input id="getList" type="button" value="獲取List對象"/>    
  26.     <input id="getMap" type="button" value="獲取Map對象"/>    
  27.     <br>  
  28.     <br>  
  29.     <br>  
  30.     <!-- 要顯示信息的層 -->  
  31.     <div id="message"></div>  
  32.     <form>  
  33.         用戶ID：<input name="userInfo.userId" type="text"/><br/>  
  34.         用戶名：<input name="userInfo.userName" type="text"/><br/>  
  35.         密   碼：<input name="userInfo.password" type="text"/><br>  
  36.         <input id="regRe" type="button" value="註冊"/>  
  37.     </form>  
  38.     <s:debug/>  
  39.   </body>  
  40. </html>  

 

最後爲上面的Jsp中的按鈕事件註冊單擊事件，這裏把這些事件代碼單獨的放到一個json.js文件裏。異步

[javascript] view plain copy print ?
  1. //初始加載頁面時   
  2. $(document).ready(function(){  
  3.     //爲獲獲取js值註冊鼠標單擊事件   
  4.     $("#getJsData").click(function(){  
  5.         $.getJSON("js/test.js",function(data){  
  6.             //經過.操做符能夠從data.message中得到Action中message的值   
  7.             $("#message").html("<font color='red'>用戶名："+data.name+"人生目標："+data.job+"</font>");  
  8.         });  
  9.     });  
  10.     //爲獲取單個值的按鈕註冊鼠標單擊事件   
  11.     $("#getMessage").click(function(){  
  12.         $.getJSON("jsontest!returnMessage.action",function(data){  
  13.             //經過.操做符能夠從data.message中得到Action中message的值   
  14.             $("#message").html("<font color='red'>"+data.message+"</font>");  
  15.         });  
  16.     });  
  17.     //爲獲取UserInfo對象按鈕添加鼠標單擊事件   
  18.     $("#getUserInfo").click(function(){  
  19.         $.getJSON("jsontest!returnUserInfo.action",function(data){  
  20.             //清空顯示層中的數據   
  21.             $("#message").html("");  
  22.             //爲顯示層添加獲取到的數據   
  23.             //獲取對象的數據用data.userInfo.屬性   
  24.             $("#message").append("<div><font color='red'>用戶ID："+data.userInfo.userId+"</font></div>")  
  25.                          .append("<div><font color='red'>用戶名："+data.userInfo.userName+"</font></div>")  
  26.                          .append("<div><font color='red'>密碼："+data.userInfo.password+"</font></div>")  
  27.         });  
  28.     });  
  29.     //爲獲取List對象按鈕添加鼠標單擊事件   
  30.     $("#getList").click(function(){  
  31.         $.getJSON("jsontest!returnList.action",function(data){  
  32.             //清空顯示層中的數據   
  33.             $("#message").html("");  
  34.             //使用jQuery中的each(data,function(){});函數   
  35.             //從data.userInfosList獲取UserInfo對象放入value之中   
  36.             $.each(data.userInfosList,function(i,value){  
  37.                 $("#message").append("<div>第"+(i+1)+"個用戶：</div>")  
  38.                          .append("<div><font color='red'>用戶ID："+value.userId+"</font></div>")  
  39.                          .append("<div><font color='red'>用戶名："+value.userName+"</font></div>")  
  40.                          .append("<div><font color='red'>密碼："+value.password+"</font></div>");  
  41.             });  
  42.         });  
  43.     });  
  44.     //爲獲取Map對象按鈕添加鼠標單擊事件   
  45.     $("#getMap").click(function(){  
  46.         $.getJSON("jsontest!returnMap.action",function(data){  
  47.             //清空顯示層中的數據   
  48.             $("#message").html("");  
  49.             //使用jQuery中的each(data,function(){});函數   
  50.             //從data.userInfosList獲取UserInfo對象放入value之中   
  51.             //key值爲Map的鍵值   
  52.             $.each(data.userInfosMap,function(key,value){  
  53.                 $("#message").append("<div><font color='red'>用戶ID："+value.userId+"</font></div>")  
  54.                          .append("<div><font color='red'>用戶名："+value.userName+"</font></div>")  
  55.                          .append("<div><font color='red'>密碼："+value.password+"</font></div>");  
  56.             });  
  57.         });  
  58.     });  
  59.     //向服務器發送表達數據   
  60.     $("#regRe").click(function(){  
  61.         //把表單的數據進行序列化   
  62.         var params = $("form").serialize();  
  63.         //使用jQuery中的$.ajax({});Ajax方法   
  64.         $.ajax({  
  65.             url:"jsontest!gainUserInfo.action",  
  66.             type:"POST",  
  67.             data:params,  
  68.             dataType:"json",  
  69.             success:function(data){  
  70.                 //清空顯示層中的數據   
  71.             $("#message").html("");  
  72.             //爲顯示層添加獲取到的數據   
  73.             //獲取對象的數據用data.userInfo.屬性   
  74.             $("#message").append("<div><font color='red'>用戶ID："+data.userInfo.userId+"</font></div>")  
  75.                          .append("<div><font color='red'>用戶名："+data.userInfo.userName+"</font></div>")  
  76.                          .append("<div><font color='red'>密碼："+data.userInfo.password+"</font></div>")  
  77.             }  
  78.         });  
  79.     });  
  80. }); 

原文地址：http://blog.csdn.net/tjcyjd/article/details/7003325

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程