Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1169324
  • 博文数量: 234
  • 博客积分: 5592
  • 博客等级: 大校
  • 技术积分: 1987
  • 用 户 组: 普通用户
  • 注册时间: 2009-12-23 14:12
文章分类

全部博文(234)

文章存档

2015年(1)

2013年(4)

2012年(16)

2011年(204)

2010年(9)

分类: Java

2011-06-18 08:46:30

Struts2+JQuery+JSON实现异步交互,包括从后台获得单个值、对象、List和Map数据并从前台的表达中获取值把值进行序列化通过JQuery的$.ajax({})传到后台和后台的对象进行绑定。

第一步:在MyEclipse中创建JavaWeb工厂并把Struts2 和 json的jar包添加到工程中添加完成后的工程图是:

struts2+JQuery+json实现的交互 - 珏硕 - 孙珏硕的博客

第二步:创建后台:

  1. UserInfo实体类:

 

Userinfo实体类代码 struts2+JQuery+json实现的交互 - 珏硕 - 孙珏硕的博客

  1. package struts2jsonjquery.test.entity;   
  2.   
  3. import java.io.Serializable;   
  4. /**   
  5.  * 

      

  6.  *  用户实体类   
  7.  * 

      
  8.  * @author 朱延伟   
  9.  *   
  10.  */   
  11. public class UserInfo implements Serializable {   
  12.   
  13.     private static final long serialVersionUID = 3952189513312630860L;   
  14.        
  15.     private int userId;   
  16.     private String userName;   
  17.     private String password;   
  18.     public int getUserId() {   
  19.         return userId;   
  20.     }   
  21.     public void setUserId(int userId) {   
  22.         this.userId = userId;   
  23.     }   
  24.     public String getUserName() {   
  25.         return userName;   
  26.     }  

  27.  Action类

    Action类代码 struts2+JQuery+json实现的交互 - 珏硕 - 孙珏硕的博客

    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 userInfosList;     //使用josn返回List对象   
    19.     private Map userInfosMap;    //使用json返回Map对象   
    20.     //为上面的的属性提供get,Set方法   
    21.     public String getMessage() {   
    22.         return message;   
    23.     }   
    24.     public void setMessage(String message) {   
    25.         this.message = message;   
    26.     }   
    27.     public UserInfo getUserInfo() {   
    28.         return userInfo;   
    29.     }   
    30.     public void setUserInfo(UserInfo userInfo) {   
    31.         this.userInfo = userInfo;   
    32.     }   
    33.     public List getUserInfosList() {   
    34.         return userInfosList;   
    35.     }   
    36.     public void setUserInfosList(List userInfosList) {   
    37.         this.userInfosList = userInfosList;   
    38.     }   
    39.     public Map getUserInfosMap() {   
    40.         return userInfosMap;   
    41.     }   
    42.     public void setUserInfosMap(Map userInfosMap) {   
    43.         this.userInfosMap = userInfosMap;   
    44.     }   
    45.     /**   
    46.      * 

        

    47.      *  返回单个值   
    48.      * 

        

    49.      * @return   
    50.      */   
    51.     public String returnMessage(){   
    52.         this.message = "成功返回单个值";   
    53.         return "message";   
    54.     }   
    55.     /**   
    56.      * 

        

    57.      *  返回UserInfo对象   
    58.      * 

        
    59.      * @return   
    60.      */   
    61.     public String returnUserInfo(){   
    62.         userInfo = new UserInfo();   
    63.         userInfo.setUserId(10000);   
    64.         userInfo.setUserName("张三");   
    65.         userInfo.setPassword("000000");   
    66.         return "userInfo";   
    67.     }   
    68.     /**   
    69.      * 

        

    70.      *  返回List对象   
    71.      * 

        
    72.      * @return   
    73.      */   
    74.     public String returnList(){   
    75.         userInfosList = new ArrayList();   
    76.         UserInfo u1 = new UserInfo();   
    77.         u1.setUserId(10000);   
    78.         u1.setUserName("张三");   
    79.         u1.setPassword("000000");   
    80.         UserInfo u2 = new UserInfo();   
    81.         u2.setUserId(10001);   
    82.         u2.setUserName("李四");   
    83.         u2.setPassword("111111");   
    84.         UserInfo u3 = new UserInfo();   
    85.         u3.setUserId(10002);   
    86.         u3.setUserName("王五");   
    87.         u3.setPassword("222222");   
    88.         UserInfo u4 = new UserInfo();   
    89.         u4.setUserId(10003);   
    90.         u4.setUserName("赵六");   
    91.         u4.setPassword("333333");   
    92.         userInfosList.add(u1);   
    93.         userInfosList.add(u2);   
    94.         userInfosList.add(u3);   
    95.         userInfosList.add(u4);   
    96.     }   

    3.  struts.xml

     

    Struts.xml代码 struts2+JQuery+json实现的交互 - 珏硕 - 孙珏硕的博客

    1.   
    2.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
    3.     "">   
    4.   
    5.   
    6.   
    7.        
    8.            
    9.                
    10.                
    11.                
    12.                
    13.                
    14.                
    15.                
    16.                
    17.            
    18.        
    19.   
    20. 前台:

      1.  index.jsp

      Html代码 struts2+JQuery+json实现的交互 - 珏硕 - 孙珏硕的博客

      1. <%@ page language="java" pageEncoding="GBK"%>  
      2. <%   
      3.     String path = request.getContextPath();   
      4. %>  
      5.   
      6.   
      7.   
      8.     
      9.        
      10.     Struts2+JQuery+JSON  
      11.       
      12.       
      13.            
      14.       
      15.       
      16.       
      17.       
      18.     
      19.      
      20.     
      21.          
      22.          
      23.          
      24.          
      25.     
          
      26.     
          
      27.     
          
      28.       
      29.     
  
  •     
      
  •         用户ID:
      
  •         用户名:
      
  •         密   码:
      
  •           
  •       
  •      
  •   
  •  json.js

     

    Js代码 struts2+JQuery+json实现的交互 - 珏硕 - 孙珏硕的博客

    1. //初始加载页面时   
    2. $(document).ready(function(){   
    3.  //为获取单个值的按钮注册鼠标单击事件   
    4.  $("#getMessage").click(function(){   
    5.   $.getJSON("jsontest!returnMessage.action",function(data){   
    6.    //通过.操作符可以从data.message中获得Action中message的值   
    7.    $("#message").html(""+data.message+"");   
    8.   });   
    9.  });   
    10.  //为获取UserInfo对象按钮添加鼠标单击事件   
    11.  $("#getUserInfo").click(function(){   
    12.   $.getJSON("jsontest!returnUserInfo.action",function(data){   
    13.    //清空显示层中的数据   
    14.    $("#message").html("");   
    15.    //为显示层添加获取到的数据   
    16.    //获取对象的数据用data.userInfo.属性   
    17.    $("#message").append("
      用户ID:"+data.userInfo.userId+"
      ")   
    18.           .append("
      用户名:"+data.userInfo.userName+"
      ")   
    19.           .append("
      密码:"+data.userInfo.password+"
      ")   
    20.   });   
    21.  });   
    22.  //为获取List对象按钮添加鼠标单击事件   
    23.  $("#getList").click(function(){   
    24.   $.getJSON("jsontest!returnList.action",function(data){   
    25.    //清空显示层中的数据   
    26.    $("#message").html("");   
    27.    //使用jQuery中的each(data,function(){});函数   
    28.    //从data.userInfosList获取UserInfo对象放入value之中   
    29.    $.each(data.userInfosList,function(i,value){   
    30.     $("#message").append("
      第"+(i+1)+"个用户:
      ")   
    31.        .append("
      用户ID:"+value.userId+"
      ")   
    32.           .append("
      用户名:"+value.userName+"
      ")   
    33.           .append("
      密码:"+value.password+"
      ");   
    34.    });   
    35.   });   
    36.  });   
    37.  //为获取Map对象按钮添加鼠标单击事件   
    38.  $("#getMap").click(function(){   
    39.   $.getJSON("jsontest!returnMap.action",function(data){   
    40.    //清空显示层中的数据   
    41.    $("#message").html("");   
    42.    //使用jQuery中的each(data,function(){});函数   
    43.    //从data.userInfosList获取UserInfo对象放入value之中   
    44.    //key值为Map的键值   
    45.    $.each(data.userInfosMap,function(key,value){   
    46.     $("#message").append("
      用户ID:"+value.userId+"
      ")   
    47.           .append("
      用户名:"+value.userName+"
      ")   
    48.           .append("
      密码:"+value.password+"
      ");   
    49.    });   
    50.   });   
    51.  });   
    52.  //向服务器发送表达数据   
    53.  $("#regRe").click(function(){   
    54.   //把表单的数据进行序列化   
    55.   var params = $("form").serialize();   
    56.   //使用jQuery中的$.ajax({});Ajax方法   
    57.   $.ajax({   
    58.    url:"jsontest!gainUserInfo.action",   
    59.    type:"POST",   
    60.    data:params,   
    61.    dataType:"json",   
    62.    success:function(data){   
    63.     //清空显示层中的数据   
    64.    $("#message").html("");   
    65.    //为显示层添加获取到的数据   
    66.    //获取对象的数据用data.userInfo.属性   
    67.    $("#message").append("
      用户ID:"+data.userInfo.userId+"
      ")   
    68.           .append("
      用户名:"+data.userInfo.userName+"
      ")   
    69.           .append("
      密码:"+data.userInfo.password+"
      ")   
    70.    }   
    71.  注意:JSON插件会把所有包含getter方法的属性都序列化到返回结果中,所以Action中的其他execute方法都不要把名
    72.        字加get前缀。  });   

    73.  });   
    74. }); 
  • 阅读(4136) | 评论(0) | 转发(0) |
    给主人留下些什么吧!~~