当前位置： 代码迷 >> JavaScript >> Struts2 与JSON,JQUERY调整使用(转)
  详细解决方案

Struts2 与JSON,JQUERY调整使用(转)

热度：651   发布时间：2012-08-24 10:00:21.0
Struts2 与JSON,JQUERY整合使用(转)

请参见:
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代码 复制代码?收藏代码
  1. import?java.util.ArrayList; ??
  2. import?java.util.HashMap; ??
  3. import?java.util.List; ??
  4. import?java.util.Map; ??
  5. import?com.liuzd.s2sh.entity.json.UserInfo; ??
  6. import?com.opensymphony.xwork2.ActionSupport; ??
  7. ??
  8. public?class?JsonJqueryStruts2Action?extends?ActionSupport?{??? ??
  9. ?? ??
  10. ????private?static?final?long?serialVersionUID?=?3518833679938898354L;??? ??
  11. ??????? ??
  12. ????private?String?message;?????//使用json返回单个值??? ??
  13. ????private?UserInfo?userInfo;??????//使用json返回对象??? ??
  14. ????private?List<UserInfo>?userInfosList;?????//使用josn返回List对象??? ??
  15. ????private?Map<String,UserInfo>?userInfosMap;????//使用json返回Map对象??? ??
  16. ????//为上面的的属性提供get，Set方法??? ??
  17. ????public?String?getMessage()?{??? ??
  18. ????????return?message;??? ??
  19. ????}??? ??
  20. ????public?void?setMessage(String?message)?{??? ??
  21. ????????this.message?=?message;??? ??
  22. ????}??? ??
  23. ????public?UserInfo?getUserInfo()?{??? ??
  24. ????????return?userInfo;??? ??
  25. ????}??? ??
  26. ????public?void?setUserInfo(UserInfo?userInfo)?{??? ??
  27. ????????this.userInfo?=?userInfo;??? ??
  28. ????}??? ??
  29. ????public?List<UserInfo>?getUserInfosList()?{??? ??
  30. ????????return?userInfosList;??? ??
  31. ????}??? ??
  32. ????public?void?setUserInfosList(List<UserInfo>?userInfosList)?{??? ??
  33. ????????this.userInfosList?=?userInfosList;??? ??
  34. ????}??? ??
  35. ????public?Map<String,?UserInfo>?getUserInfosMap()?{??? ??
  36. ????????return?userInfosMap;??? ??
  37. ????}??? ??
  38. ????public?void?setUserInfosMap(Map<String,?UserInfo>?userInfosMap)?{??? ??
  39. ????????this.userInfosMap?=?userInfosMap;??? ??
  40. ????}??? ??
  41. ????/**??? ?
  42. ?????*?<p>??? ?
  43. ?????*??返回单个值??? ?
  44. ?????*?<p>??? ?
  45. ?????*?@return??? ?
  46. ?????*/??? ??
  47. ????public?String?returnMessage(){??? ??
  48. ????????this.message?=?"成功返回单个值";???? ??
  49. ????????return?"message";???? ??
  50. ????}??? ??
  51. ????/**??? ?
  52. ?????*?<p>??? ?
  53. ?????*??返回UserInfo对象??? ?
  54. ?????*?</p>??? ?
  55. ?????*?@return??? ?
  56. ?????*/??? ??
  57. ????public?String?returnUserInfo(){??? ??
  58. ????????userInfo?=?new?UserInfo();??? ??
  59. ????????userInfo.setUserId(10000);???? ??
  60. ????????userInfo.setUserName("张三");???? ??
  61. ????????userInfo.setPassword("000000");???? ??
  62. ????????return?"userInfo";???? ??
  63. ????}??? ??
  64. ????/**??? ?
  65. ?????*?<p>??? ?
  66. ?????*??返回List对象??? ?
  67. ?????*?</p>??? ?
  68. ?????*?@return??? ?
  69. ?????*/??? ??
  70. ????public?String?returnList(){??? ??
  71. ????????userInfosList?=?new?ArrayList<UserInfo>();??? ??
  72. ????????UserInfo?u1?=?new?UserInfo();??? ??
  73. ????????u1.setUserId(10000);???? ??
  74. ????????u1.setUserName("张三");???? ??
  75. ????????u1.setPassword("000000");???? ??
  76. ????????UserInfo?u2?=?new?UserInfo();??? ??
  77. ????????u2.setUserId(10001);???? ??
  78. ????????u2.setUserName("李四");???? ??
  79. ????????u2.setPassword("111111");???? ??
  80. ????????UserInfo?u3?=?new?UserInfo();??? ??
  81. ????????u3.setUserId(10002);???? ??
  82. ????????u3.setUserName("王五");???? ??
  83. ????????u3.setPassword("222222");???? ??
  84. ????????UserInfo?u4?=?new?UserInfo();??? ??
  85. ????????u4.setUserId(10003);???? ??
  86. ????????u4.setUserName("赵六");???? ??
  87. ????????u4.setPassword("333333");???? ??
  88. ????????userInfosList.add(u1);??? ??
  89. ????????userInfosList.add(u2);??? ??
  90. ????????userInfosList.add(u3);??? ??
  91. ????????userInfosList.add(u4);??? ??
  92. ????????return?"list";???? ??
  93. ????}??? ??
  94. ????/**??? ?
  95. ?????*?<p>??? ?
  96. ?????*??返回Map对象??? ?
  97. ?????*?</p>??? ?
  98. ?????*?@return??? ?
  99. ?????*/??? ??
  100. ????public?String?returnMap(){??? ??
  101. ????????userInfosMap?=?new?HashMap<String,UserInfo>();??? ??
  102. ????????UserInfo?u1?=?new?UserInfo();??? ??
  103. ????????u1.setUserId(10000);???? ??
  104. ????????u1.setUserName("张三");???? ??
  105. ????????u1.setPassword("000000");???? ??
  106. ????????UserInfo?u2?=?new?UserInfo();??? ??
  107. ????????u2.setUserId(10001);???? ??
  108. ????????u2.setUserName("李四");???? ??
  109. ????????u2.setPassword("111111");???? ??
  110. ????????UserInfo?u3?=?new?UserInfo();??? ??
  111. ????????u3.setUserId(10002);???? ??
  112. ????????u3.setUserName("王五");???? ??
  113. ????????u3.setPassword("222222");???? ??
  114. ????????UserInfo?u4?=?new?UserInfo();??? ??
  115. ????????u4.setUserId(10003);???? ??
  116. ????????u4.setUserName("赵六");???? ??
  117. ????????u4.setPassword("333333");???? ??
  118. ????????userInfosMap.put(u1.getUserId()+"",?u1);???? ??
  119. ????????userInfosMap.put(u2.getUserId()+"",?u2);???? ??
  120. ????????userInfosMap.put(u3.getUserId()+"",?u3);???? ??
  121. ????????userInfosMap.put(u4.getUserId()+"",?u4);???? ??
  122. ????????return?"map";???? ??
  123. ????}??? ??
  124. ????/**??? ?
  125. ?????*?<p>??? ?
  126. ?????*??获得对象，也就是通过表达获得对象(异步的)??? ?
  127. ?????*?</P>??? ?
  128. ?????*?@return??? ?
  129. ?????*/??? ??
  130. ????public?String?gainUserInfo(){??? ??
  131. ????????System.out.println("用户ID："+userInfo.getUserId());???? ??
  132. ????????System.out.println("用户名："+userInfo.getUserName());???? ??
  133. ????????System.out.println("密码："+userInfo.getPassword());???? ??
  134. ????????return?"userInfo";???? ??
  135. ????}??? ??
  136. ????/**??? ?
  137. ?????*?获得单个值就不用写了和平常一样??? ?
  138. ?????*/??? ??
  139. }????
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代码 复制代码?收藏代码
  1. <%@?page?language="java"?contentType="text/html;?charset=UTF-8"??pageEncoding="UTF-8"%> ??
  2. <%???? ??
  3. ????String?path?=?request.getContextPath();???? ??
  4. %> ??
  5. <html> ??
  6. ????<head> ??
  7. ????????<title>Struts2+JQuery+JSON</title> ??
  8. ????????<meta?http-equiv="pragma"?content="no-cache"> ??
  9. ????????<meta?http-equiv="cache-control"?content="no-cache"> ??
  10. ????????<meta?http-equiv="expires"?content="0"> ??
  11. ????????<meta?http-equiv="keywords"?content="keyword1,keyword2,keyword3"> ??
  12. ????????<meta?http-equiv="description"?content="This?is?my?page"> ??
  13. ????????<script?type="text/javascript"?src="<%=path?%>/js/jquery-1.5.1.min.js"></script> ??
  14. ????????<script?type="text/javascript"?src="<%=path%>/js/json.js"></script> ??
  15. ????</head> ??
  16. ??
  17. ????<body> ??
  18. ????????<input?id="getMessage"?type="button"?value="获取单个值"?/> ??
  19. ????????&nbsp;&nbsp; ??
  20. ????????<input?id="getUserInfo"?type="button"?value="获取UserInfo对象"?/> ??
  21. ????????&nbsp;&nbsp; ??
  22. ????????<input?id="getList"?type="button"?value="获取List对象"?/> ??
  23. ????????&nbsp;&nbsp; ??
  24. ????????<input?id="getMap"?type="button"?value="获取Map对象"?/> ??
  25. ????????&nbsp;&nbsp; ??
  26. ????????<br> ??
  27. ????????<br> ??
  28. ????????<br> ??
  29. ????????<!--?要显示信息的层?--> ??
  30. ????????<div?id="message"></div> ??
  31. ????????<form> ??
  32. ????????????用户ID： ??
  33. ????????????<input?name="userInfo.userId"?type="text"?/> ??
  34. ????????????<br?/> ??
  35. ????????????用户名： ??
  36. ????????????<input?name="userInfo.userName"?type="text"?/> ??
  37. ????????????<br?/> ??
  38. ????????????密&nbsp;&nbsp;&nbsp;码： ??
  39. ????????????<input?name="userInfo.password"?type="text"?/> ??
  40. ????????????<br> ??
  41. ????????????<input?id="regRe"?type="button"?value="注册"?/> ??
  42. ????????</form> ??
  43. ????</body> ??
  44. </html>??
<%@ 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代码 复制代码?收藏代码
  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("<font?color='red'>"+data.message+"</font>");??? ??
  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("<div><font?color='red'>用户ID："+data.userInfo.userId+"</font></div>")??? ??
  18. ??????????.append("<div><font?color='red'>用户名："+data.userInfo.userName+"</font></div>")??? ??
  19. ??????????.append("<div><font?color='red'>密码："+data.userInfo.password+"</font></div>")??? ??
  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("<div>第"+(i+1)+"个用户：</div>")??? ??
  31. ???????.append("<div><font?color='red'>用户ID："+value.userId+"</font></div>")??? ??
  32. ??????????.append("<div><font?color='red'>用户名："+value.userName+"</font></div>")??? ??
  33. ??????????.append("<div><font?color='red'>密码："+value.password+"</font></div>");??? ??
  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("<div><font?color='red'>用户ID："+value.userId+"</font></div>")??? ??
  47. ??????????.append("<div><font?color='red'>用户名："+value.userName+"</font></div>")??? ??
  48. ??????????.append("<div><font?color='red'>密码："+value.password+"</font></div>");??? ??
  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("<div><font?color='red'>用户ID："+data.userInfo.userId+"</font></div>")??? ??
  68. ??????????.append("<div><font?color='red'>用户名："+data.userInfo.userName+"</font></div>")??? ??
  69. ??????????.append("<div><font?color='red'>密码："+data.userInfo.password+"</font></div>")??? ??
  70. ???}??? ??
  71. ??});??
  72. ?});??? ??
  73. });????
    74.
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.