Struts2+jQuery+JSON实现异步交互

jsonjQueryStrutsAjax百度

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

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

第二步：创建后台：

1. UserInfo实体类：

Userinfo实体类代码

1.package struts2jsonjquery.test.entity;

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 = 39521895133126

30860L;

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. https://www.360docs.net/doc/392394257.html,erId = userId;

23. }

24. public String getUserName() {

25. return userName;

26. }

27. public void setUserName(String userName) {

28. https://www.360docs.net/doc/392394257.html,erName = userName;

29. }

30. public String getPassword() {

31. return password;

32. }

33. public void setPassword(String password) {

34. this.password = password;

35. }

36.}

Userinfo实体类代码

1.package struts2jsonjquery.test.entity;

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 = 39521895133126

30860L;

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. https://www.360docs.net/doc/392394257.html,erId = userId;

23. }

24. public String getUserName() {

25. return userName;

26. }

27. public void setUserName(String userName) {

28. https://www.360docs.net/doc/392394257.html,erName = userName;

29. }

30. public String getPassword() {

31. return password;

32. }

33. public void setPassword(String password) {

34. this.password = password;

35. }

36.}

2. Action类

Action类代码

1.package struts2jsonjquery.test.action;

3.import java.util.ArrayList;

4.import java.util.HashMap;

5.import java.util.List;

6.import java.util.Map;

8.import https://www.360docs.net/doc/392394257.html,erInfo;

10.import com.opensymphony.xwork2.ActionSupport;

11.

12.public class JsonJqueryStruts2Action extends ActionSupport {

13.

14. private static final long serialVersionUID = 35188336799388

98354L;

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. https://www.360docs.net/doc/392394257.html,erInfo = userInfo;

32. }

33. public List getUserInfosList() {

34. return userInfosList;

35. }

36. public void setUserInfosList(List userInfosList)

{

37. https://www.360docs.net/doc/392394257.html,erInfosList = userInfosList;

38. }

39. public Map getUserInfosMap() {

40. return userInfosMap;

41. }

42. public void setUserInfosMap(Map userInfos

Map) {

43. https://www.360docs.net/doc/392394257.html,erInfosMap = 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. return "list";

97. }

98. /**

99. *

100. * 返回Map对象

101. *

102. * @return

103. */

104. public String returnMap(){

105. userInfosMap = new HashMap(); 106. UserInfo u1 = new UserInfo();

107. u1.setUserId(10000);

108. u1.setUserName("张三");

109. u1.setPassword("000000");

110. UserInfo u2 = new UserInfo();

111. u2.setUserId(10001);

112. u2.setUserName("李四");

113. u2.setPassword("111111");

114. UserInfo u3 = new UserInfo();

115. u3.setUserId(10002);

116. u3.setUserName("王五");

117. u3.setPassword("222222");

118. UserInfo u4 = new UserInfo();

119. u4.setUserId(10003);

120. u4.setUserName("赵六");

121. u4.setPassword("333333");

122. userInfosMap.put(u1.getUserId()+"", u1); 123. userInfosMap.put(u2.getUserId()+"", u2); 124. userInfosMap.put(u3.getUserId()+"", u3); 125. userInfosMap.put(u4.getUserId()+"", u4); 126. return "map";

127. }

128. /**

129. *

130. * 获得对象，也就是通过表达获得对象(异步的)

131. *

132. * @return

133. */

134. public String gainUserInfo(){

135. System.out.println("用户ID：

"+userInfo.getUserId());

136. System.out.println("用户名：

"+userInfo.getUserName());

137. System.out.println("密码：

"+userInfo.getPassword());

138. return "userInfo";

139. }

140. /**

141. * 获得单个值就不用写了和平常一样

142. */

143.}

Action类代码

1.package struts2jsonjquery.test.action;

3.import java.util.ArrayList;

4.import java.util.HashMap;

5.import java.util.List;

6.import java.util.Map;

8.import https://www.360docs.net/doc/392394257.html,erInfo;

10.import com.opensymphony.xwork2.ActionSupport;

11.

12.public class JsonJqueryStruts2Action extends ActionSupport {

13.

14. private static final long serialVersionUID = 35188336799388

98354L;

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. https://www.360docs.net/doc/392394257.html,erInfo = userInfo;

32. }

33. public List getUserInfosList() {

34. return userInfosList;

35. }

36. public void setUserInfosList(List userInfosList)

{

37. https://www.360docs.net/doc/392394257.html,erInfosList = userInfosList;

38. }

39. public Map getUserInfosMap() {

40. return userInfosMap;

41. }

42. public void setUserInfosMap(Map userInfos

Map) {

43. https://www.360docs.net/doc/392394257.html,erInfosMap = 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. return "list";

97. }

98. /**

99. *

100. * 返回Map对象

101. *

102. * @return

103. */

104. public String returnMap(){

105. userInfosMap = new HashMap(); 106. UserInfo u1 = new UserInfo();

107. u1.setUserId(10000);

108. u1.setUserName("张三");

109. u1.setPassword("000000");

110. UserInfo u2 = new UserInfo();

111. u2.setUserId(10001);

112. u2.setUserName("李四");

113. u2.setPassword("111111");

114. UserInfo u3 = new UserInfo();

115. u3.setUserId(10002);

116. u3.setUserName("王五");

117. u3.setPassword("222222");

118. UserInfo u4 = new UserInfo();

119. u4.setUserId(10003);

120. u4.setUserName("赵六");

121. u4.setPassword("333333");

122. userInfosMap.put(u1.getUserId()+"", u1);

123. userInfosMap.put(u2.getUserId()+"", u2);

124. userInfosMap.put(u3.getUserId()+"", u3);

125. userInfosMap.put(u4.getUserId()+"", u4);

126. return "map";

127. }

128. /**

129. *

130. * 获得对象，也就是通过表达获得对象(异步的) 131. *

132. * @return

133. */

134. public String gainUserInfo(){

135. System.out.println("用户ID：

"+userInfo.getUserId());

136. System.out.println("用户名：

"+userInfo.getUserName());

137. System.out.println("密码：

"+userInfo.getPassword());

138. return "userInfo";

139. }

140. /**

141. * 获得单个值就不用写了和平常一样

142. */

143.}

3. struts.xml

Struts.xml代码

3. "-//Apache Software Foundation//DTD Struts Configuration 2.

0//EN"

4. "https://www.360docs.net/doc/392394257.html,/dtds/struts-2.0.dtd">

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

Struts.xml代码

3. "-//Apache Software Foundation//DTD Struts Configuration 2.

0//EN"

4. "https://www.360docs.net/doc/392394257.html,/dtds/struts-2.0.dtd">

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

前台：

1. index.jsp

Html代码

1.<%@ page language="java"pageEncoding="GBK"%>

2.<%

3. String path = request.getContextPath();

4.%>

10. Struts2+JQuery+JSON

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

36.

37.

Html代码

1.<%@ page language="java"pageEncoding="GBK"%>

2.<%

3. String path = request.getContextPath();

4.%>

10. Struts2+JQuery+JSON

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

36.

37.

2. 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(""+data.message+"

>");

8. });

9. });

10. //为获取UserInfo对象按钮添加鼠标单击事件

11. $("#getUserInfo").click(function(){

12. $.getJSON("jsontest!returnUserInfo.action",function(data){

13. //清空显示层中的数据

14. $("#message").html("");

15. //为显示层添加获取到的数据

16. //获取对象的数据用https://www.360docs.net/doc/392394257.html,erInfo.属性

17. $("#message").append("

用户ID：

"+https://www.360docs.net/doc/392394257.html,erId+"

18. .append("

用户名：

"+https://www.360docs.net/doc/392394257.html,erName+"

19. .append("

密码：

"+https://www.360docs.net/doc/392394257.html,erInfo.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. //从https://www.360docs.net/doc/392394257.html,erInfosList获取UserInfo对象放入value之中

29. $.each(https://www.360docs.net/doc/392394257.html,erInfosList,function(i,value){

30. $("#message").append("

第"+(i+1)+"个用户：

31. .append("

用户ID：

"+https://www.360docs.net/doc/392394257.html,erId+"

32. .append("

用户名：

"+https://www.360docs.net/doc/392394257.html,erName+"

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. //从https://www.360docs.net/doc/392394257.html,erInfosList获取UserInfo对象放入value之中

44. //key值为Map的键值

45. $.each(https://www.360docs.net/doc/392394257.html,erInfosMap,function(key,value){

46. $("#message").append("

用户ID：

"+https://www.360docs.net/doc/392394257.html,erId+"

47. .append("

用户名：

"+https://www.360docs.net/doc/392394257.html,erName+"

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. //获取对象的数据用https://www.360docs.net/doc/392394257.html,erInfo.属性

67. $("#message").append("

用户ID：

"+https://www.360docs.net/doc/392394257.html,erId+"

68. .append("

用户名：

"+https://www.360docs.net/doc/392394257.html,erName+"

69. .append("

密码：

"+https://www.360docs.net/doc/392394257.html,erInfo.password+"

70. }

71. });

72. });

73.});

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(""+data.message+"

>");

8. });

9. });

10. //为获取UserInfo对象按钮添加鼠标单击事件

11. $("#getUserInfo").click(function(){

12. $.getJSON("jsontest!returnUserInfo.action",function(data){

13. //清空显示层中的数据

14. $("#message").html("");

15. //为显示层添加获取到的数据

16. //获取对象的数据用https://www.360docs.net/doc/392394257.html,erInfo.属性

17. $("#message").append("

用户ID：

"+https://www.360docs.net/doc/392394257.html,erId+"

18. .append("

用户名：

"+https://www.360docs.net/doc/392394257.html,erName+"

19. .append("

密码：

"+https://www.360docs.net/doc/392394257.html,erInfo.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. //从https://www.360docs.net/doc/392394257.html,erInfosList获取UserInfo对象放入value之中

29. $.each(https://www.360docs.net/doc/392394257.html,erInfosList,function(i,value){

30. $("#message").append("

第"+(i+1)+"个用户：

31. .append("

用户ID：

"+https://www.360docs.net/doc/392394257.html,erId+"

32. .append("

用户名：

"+https://www.360docs.net/doc/392394257.html,erName+"

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. //从https://www.360docs.net/doc/392394257.html,erInfosList获取UserInfo对象放入value之中

44. //key值为Map的键值

45. $.each(https://www.360docs.net/doc/392394257.html,erInfosMap,function(key,value){

46. $("#message").append("

用户ID：

"+https://www.360docs.net/doc/392394257.html,erId+"

47. .append("

用户名：

"+https://www.360docs.net/doc/392394257.html,erName+"

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. //获取对象的数据用https://www.360docs.net/doc/392394257.html,erInfo.属性

67. $("#message").append("

用户ID：

"+https://www.360docs.net/doc/392394257.html,erId+"

68. .append("

用户名：

"+https://www.360docs.net/doc/392394257.html,erName+"

69. .append("

密码：

"+https://www.360docs.net/doc/392394257.html,erInfo.password+"

70. }

71. });

72. });

73.});