Struts2 加入JSON,JQUERY

来源：互联网发布：sql查询字段最大长度编辑：程序博客网时间：2024/05/15 14:15

请参见:
Struts2.2+Spring3.1+Hibernate3.6整合(登录示例)
http://liuzidong.iteye.com/blog/935493
在这个示例作了修改!
参考资料
1 Struts2+jQuery+JSON实现异步交互
http://qsfwy.iteye.com/blog/682796
2 主题：[原创]Struts2 + JQuery + JSON实现AJAX
http://www.iteye.com/topic/560638
说明:主要参考了 Struts2+jQuery+JSON实现异步交互文章,只不过原作者使用Struts2版本是是:2.1.8及json-lib.2.1.jar,在Struts2中的插件: struts2-json-plugin-2.2.1.1.jar已经不在需要json-lib.jar了,Jquery为1.5.1,在此表示向你感谢!学会了Struts2+jQueryJSON

一环境:XP+Myeclipse6.6+WebLogic92+JDK1.5
二具体步骤如下:
所需要的jar文件为:struts2-json-plugin-2.2.1.1.jar加入WEB-INF/lib下
所有代码引用Struts2+jQuery+JSON实现异步交互的代码,请理解!
1 JsonJqueryStruts2Action.java

Java代码  
import java.util.ArrayList;  
import java.util.HashMap;  
import java.util.List;  
import java.util.Map;  
import com.liuzd.s2sh.entity.json.UserInfo;  
import com.opensymphony.xwork2.ActionSupport;  
  
public class JsonJqueryStruts2Action extends ActionSupport {     
    
    private static final long serialVersionUID = 3518833679938898354L;     
         
    private String message;     //使用json返回单个值     
    private UserInfo userInfo;      //使用json返回对象     
    private List<UserInfo> userInfosList;     //使用josn返回List对象     
    private Map<String,UserInfo> userInfosMap;    //使用json返回Map对象     
    //为上面的的属性提供get，Set方法     
    public String getMessage() {     
        return message;     
    }     
    public void setMessage(String message) {     
        this.message = message;     
    }     
    public UserInfo getUserInfo() {     
        return userInfo;     
    }     
    public void setUserInfo(UserInfo userInfo) {     
        this.userInfo = userInfo;     
    }     
    public List<UserInfo> getUserInfosList() {     
        return userInfosList;     
    }     
    public void setUserInfosList(List<UserInfo> userInfosList) {     
        this.userInfosList = userInfosList;     
    }     
    public Map<String, UserInfo> getUserInfosMap() {     
        return userInfosMap;     
    }     
    public void setUserInfosMap(Map<String, UserInfo> userInfosMap) {     
        this.userInfosMap = userInfosMap;     
    }     
    /**    
     * <p>    
     *  返回单个值    
     * <p>    
     * @return    
     */     
    public String returnMessage(){     
        this.message = "成功返回单个值";      
        return "message";      
    }     
    /**    
     * <p>    
     *  返回UserInfo对象    
     * </p>    
     * @return    
     */     
    public String returnUserInfo(){     
        userInfo = new UserInfo();     
        userInfo.setUserId(10000);      
        userInfo.setUserName("张三");      
        userInfo.setPassword("000000");      
        return "userInfo";      
    }     
    /**    
     * <p>    
     *  返回List对象    
     * </p>    
     * @return    
     */     
    public String returnList(){     
        userInfosList = new ArrayList<UserInfo>();     
        UserInfo u1 = new UserInfo();     
        u1.setUserId(10000);      
        u1.setUserName("张三");      
        u1.setPassword("000000");      
        UserInfo u2 = new UserInfo();     
        u2.setUserId(10001);      
        u2.setUserName("李四");      
        u2.setPassword("111111");      
        UserInfo u3 = new UserInfo();     
        u3.setUserId(10002);      
        u3.setUserName("王五");      
        u3.setPassword("222222");      
        UserInfo u4 = new UserInfo();     
        u4.setUserId(10003);      
        u4.setUserName("赵六");      
        u4.setPassword("333333");      
        userInfosList.add(u1);     
        userInfosList.add(u2);     
        userInfosList.add(u3);     
        userInfosList.add(u4);     
        return "list";      
    }     
    /**    
     * <p>    
     *  返回Map对象    
     * </p>    
     * @return    
     */     
    public String returnMap(){     
        userInfosMap = new HashMap<String,UserInfo>();     
        UserInfo u1 = new UserInfo();     
        u1.setUserId(10000);      
        u1.setUserName("张三");      
        u1.setPassword("000000");      
        UserInfo u2 = new UserInfo();     
        u2.setUserId(10001);      
        u2.setUserName("李四");      
        u2.setPassword("111111");      
        UserInfo u3 = new UserInfo();     
        u3.setUserId(10002);      
        u3.setUserName("王五");      
        u3.setPassword("222222");      
        UserInfo u4 = new UserInfo();     
        u4.setUserId(10003);      
        u4.setUserName("赵六");      
        u4.setPassword("333333");      
        userInfosMap.put(u1.getUserId()+"", u1);      
        userInfosMap.put(u2.getUserId()+"", u2);      
        userInfosMap.put(u3.getUserId()+"", u3);      
        userInfosMap.put(u4.getUserId()+"", u4);      
        return "map";      
    }     
    /**    
     * <p>    
     *  获得对象，也就是通过表达获得对象(异步的)    
     * </P>    
     * @return    
     */     
    public String gainUserInfo(){     
        System.out.println("用户ID："+userInfo.getUserId());      
        System.out.println("用户名："+userInfo.getUserName());      
        System.out.println("密码："+userInfo.getPassword());      
        return "userInfo";      
    }     
    /**    
     * 获得单个值就不用写了和平常一样    
     */     
}    

2 测试JSP页面

Jsp代码  
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>  
<%      
    String path = request.getContextPath();      
%>  
<html>  
    <head>  
        <title>Struts2+JQuery+JSON</title>  
        <meta http-equiv="pragma" content="no-cache">  
        <meta http-equiv="cache-control" content="no-cache">  
        <meta http-equiv="expires" content="0">  
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
        <meta http-equiv="description" content="This is my page">  
        <script type="text/javascript" src="<%=path %>/js/jquery-1.5.1.min.js"></script>  
        <script type="text/javascript" src="<%=path%>/js/json.js"></script>  
    </head>  
  
    <body>  
        <input id="getMessage" type="button" value="获取单个值" />  
        &nbsp;&nbsp;  
        <input id="getUserInfo" type="button" value="获取UserInfo对象" />  
        &nbsp;&nbsp;  
        <input id="getList" type="button" value="获取List对象" />  
        &nbsp;&nbsp;  
        <input id="getMap" type="button" value="获取Map对象" />  
        &nbsp;&nbsp;  
        <br>  
        <br>  
        <br>  
        <!-- 要显示信息的层 -->  
        <div id="message"></div>  
        <form>  
            用户ID：  
            <input name="userInfo.userId" type="text" />  
            <br />  
            用户名：  
            <input name="userInfo.userName" type="text" />  
            <br />  
            密&nbsp;&nbsp;&nbsp;码：  
            <input name="userInfo.password" type="text" />  
            <br>  
            <input id="regRe" type="button" value="注册" />  
        </form>  
    </body>  
</html>  

3 json.js代码

Js代码  
//初始加载页面时     
$(document).ready(function(){     
 //为获取单个值的按钮注册鼠标单击事件     
 $("#getMessage").click(function(){     
  $.getJSON("jsontest!returnMessage.action",function(data){     
   //通过.操作符可以从data.message中获得Action中message的值     
   $("#message").html("<font color='red'>"+data.message+"</font>");     
  });     
 });     
 //为获取UserInfo对象按钮添加鼠标单击事件     
 $("#getUserInfo").click(function(){     
  $.getJSON("jsontest!returnUserInfo.action",function(data){     
   //清空显示层中的数据     
   $("#message").html("");     
   //为显示层添加获取到的数据     
   //获取对象的数据用data.userInfo.属性     
   $("#message").append("<div><font color='red'>用户ID："+data.userInfo.userId+"</font></div>")     
          .append("<div><font color='red'>用户名："+data.userInfo.userName+"</font></div>")     
          .append("<div><font color='red'>密码："+data.userInfo.password+"</font></div>")     
  });     
 });     
 //为获取List对象按钮添加鼠标单击事件     
 $("#getList").click(function(){     
  $.getJSON("jsontest!returnList.action",function(data){     
   //清空显示层中的数据     
   $("#message").html("");     
   //使用jQuery中的each(data,function(){});函数     
   //从data.userInfosList获取UserInfo对象放入value之中     
   $.each(data.userInfosList,function(i,value){     
    $("#message").append("<div>第"+(i+1)+"个用户：</div>")     
       .append("<div><font color='red'>用户ID："+value.userId+"</font></div>")     
          .append("<div><font color='red'>用户名："+value.userName+"</font></div>")     
          .append("<div><font color='red'>密码："+value.password+"</font></div>");     
   });     
  });     
 });     
 //为获取Map对象按钮添加鼠标单击事件     
 $("#getMap").click(function(){     
  $.getJSON("jsontest!returnMap.action",function(data){     
   //清空显示层中的数据     
   $("#message").html("");     
   //使用jQuery中的each(data,function(){});函数     
   //从data.userInfosList获取UserInfo对象放入value之中     
   //key值为Map的键值     
   $.each(data.userInfosMap,function(key,value){     
    $("#message").append("<div><font color='red'>用户ID："+value.userId+"</font></div>")     
          .append("<div><font color='red'>用户名："+value.userName+"</font></div>")     
          .append("<div><font color='red'>密码："+value.password+"</font></div>");     
   });     
  });     
 });     
 //向服务器发送表达数据     
 $("#regRe").click(function(){     
  //把表单的数据进行序列化     
  var params = $("form").serialize();     
  //使用jQuery中的$.ajax({});Ajax方法     
  $.ajax({     
   url:"jsontest!gainUserInfo.action",     
   type:"POST",     
   data:params,     
   dataType:"json",     
   success:function(data){     
    //清空显示层中的数据     
   $("#message").html("");     
   //为显示层添加获取到的数据     
   //获取对象的数据用data.userInfo.属性     
   $("#message").append("<div><font color='red'>用户ID："+data.userInfo.userId+"</font></div>")     
          .append("<div><font color='red'>用户名："+data.userInfo.userName+"</font></div>")     
          .append("<div><font color='red'>密码："+data.userInfo.password+"</font></div>")     
   }     
  });     
 });     
});    

说明:附件中只有:struts2-json-plugin-2.2.1.1.jar与jquery-1.5.1.min.js

0 0