Struts2 + JQuery + JSON实现AJAX

最新推荐文章于 2021-08-06 19:47:59 发布

背着蜗牛闯世界的Jillion

最新推荐文章于 2021-08-06 19:47:59 发布

阅读量153

点赞数

分类专栏： Java 文章标签： js

本文链接：https://blog.csdn.net/simle168/article/details/51212465

版权

Java 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

网上关于这方面的资料也不少，但多半是struts1的，在Struts2中使用JSON可以更容易实现数据的异步传输。

先做好准备工作:

1.Struts2相关lib, 注意将struts2 lib下面的以json开头的包也加入到工程。

2.JSON Plugin，它可以将Struts2 Action中的结果直接返回为JSON。下载地址：http://jsonplugin.googlecode.com/files/jsonplugin-0.34.jar （支持struts2.1.6及以上版本）。

3.JQuery，JS的一个lib. 下载地址：http://www.jquery.com （最新版本为1.3.2）。

准备工作都做好之后，我们可以开始了。建一个WEB工程，把相关的包加入到工程。我们需要做的就是三件事：

一、准备一个JSP页面用于提交ajax请求，这里我使用了JQuery的$.getJSON(url,params,function callback(data))函数提交ajax请求到指定url，并且携带参数params，最后用一个回调函数callback处理请求返回结果data；

二、一个处理请求的Action类，并在struts.xml文件中做相应配置：写一个action类处理ajax请求数据，并将返回结果封装成一个JSONObject对象返回给请求页面。同时在struts.xml中配置对应action，指明其返回类型为json并使其package的extends为json-default，并将要返回请求页面的数据放在名为root的param中，如<param name="root">result</param>。

三、接受请求返回结果：使用JS的eval方法将返回结果data转换成JSON对象，并处理返回结果。

具体参见以下代码：

// login.jsp 使用getJSON方法提交ajax请求，并处理请求返回结果。注意请求的url为login.html这是因为我将struts2.preperties中的struts.action.extension改成了htm，默认为action。l

Html代码

1. <%@ page language="java" contentType="text/html; charset=UTF-8"

2. pageEncoding="UTF-8"%>

3. <%@ taglib uri="/struts-tags" prefix="s"%>

4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

5. <html>

6. <head>

7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

8. <title><s:text name="page.title.login" /></title>

9. <script type="text/javascript" src="jquery-1.3.2.js"></script>

10. <script type="text/javascript" language="javascript">

11. $(document).ready(function(){

12. $("#login").click(function(){

13. login();

14. });

15. });

16.

17. function login(){

18. var url = "login.html";

19. var params = {"user.logName":$("#name").attr("value"),"user.password":$("#password").attr("value")};

20.

21. $.getJSON(url,params,function callback(data){

22. // convert to json object

23. var user = eval("("+data+")");//

24.

25.

26. $("#result").each(function(){

27. $(this).html('welcome ,' + user.name);

28. });

29. });

30. }

31. </script>

32. </head>

33. <body>

34. <s:actionmessage/>

35. <form method="post" id="form"><s:text

36. name="user.label.name" />:<input type="textbox" name="user.logName" id="name"

37. value='${param["user.logName"]}' /><br>

38. <s:text name="user.label.password" />:<input type="password" id="password"

39. name="user.password" /><br>

40. <input type="button" id="login" value='<s:text name="button.label.login" />' /></form>

41. <div id="result">

42.

43. </div>

44. </body>

45. </html>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

$(document).ready(function(){

$("#login").click(function(){

});

function login(){

var url = "login.html";

var params = {"user.logName":$("#name").attr("value"),"user.password":$("#password").attr("value")};

$.getJSON(url,params,function callback(data){

// convert to json object

var user = eval("("+data+")");//

$("#result").each(function(){

$(this).html('welcome ,' + user.name);

});

}

</script>

</head>

<body>

<s:actionmessage/>

<form method="post" id="form"><s:text

name="user.label.name" />:<input type="textbox" name="user.logName" id="name"

value='${param["user.logName"]}' /><br>

<s:text name="user.label.password" />:<input type="password" id="password"

name="user.password" /><br>

</div>

</body>

</html>

// struts.xml 注意package的extends属性与result的type属性。result为userAction的一个属性，这里将结果返回给ajax的请求页面。

Java代码

1. <package name="login" namespace="/" extends="json-default" >

2. <action name="login" class="userAction" method="login" >

3. <result type="json">

4. <param name="root">result</param>

5. </result>

6. </action>

7. </package>

<param name="root">result</param>

</result>

</action>

</package>

// UserAction.java 只需要看login()方法，另外读者需要自己增加一个User的实体类用来获取请求数据。这里我只将user的logName与password封装到了一个map以JSONObject的方式返回（因为还有其它空属性没必要返回）。也可以直接调用JSONObject.fromObject(user)将整个user对象返回给JSON。注意最后返回的并不是一个JSONObject对象，而是一String类型的result。这里的result须与action中的<param name="root">中配置的一致。这里代码写的比较简单，没有增加对用户名密码的验证。

Java代码

1. package com.word.action;

3. import java.util.HashMap;

4. import java.util.List;

5. import java.util.Map;

7. import com.word.vo.User;

9. import net.sf.json.JSONObject;

10.

11. import org.apache.poi.hssf.record.formula.eval.AddEval;

12. import org.apache.struts2.components.ActionError;

13. import org.apache.struts2.components.ActionMessage;

14. import org.apache.struts2.interceptor.validation.JSONValidationInterceptor;

15.

16. import com.opensymphony.xwork2.ActionSupport;

17. import com.word.service.IUserService;

18.

19. public class UserAction extends ActionSupport {

20. private User user;

21. private String result;

22.

23. public String getResult(){

24. return result;

25. }

26.

27. public void setResult(String result){

28. this.result = result;

29. }

30. public User getUser() {

31. return user;

32. }

public void setUser(User user) {

33. this.user = user;

34. }

35.

36. private IUserService userService;

37.

38. public void setUserService(IUserService userService) {

39. this.userService = userService;

40. }

41.

42. public String login() throws Exception {

43.

44. Map map = new HashMap();

45. map.put("name", user.getLogName());

46. map.put("password",user.getPassword());

47. JSONObject obj = JSONObject.fromObject(map);

48.

49.

50. result = obj.toString();

51.

52. return SUCCESS;

53. }

54.

55. /**

56. * get User list

57. */

58. public List<User> findAll() throws Exception {

59. return userService.findAll();

60. }

61.

62. /**

63. * get User by id

64. *

65. * @param id

66. * @throw Exception

67. */

68. public User getUserById(Long id) throws Exception {

69. return userService.getUserById(id);

70. }

71.

72. /**

73. * create User

74. *

75. * @param user

76. * @throw Exception

77. */

78. public String createUser() {

79. clearErrorsAndMessages();

80.

81. if(user.getLogName().trim().equals("") ){

82. this.addActionMessage(getText("error.user.name"));

83. return INPUT;

84. }

85. if(user.getPassword().trim().equals("") ){

86. this.addActionMessage(getText("error.user.password"));

87. return INPUT;

88. }

89. try{

90. userService.createUser(user);

91. this.addActionMessage(getText("user.message.create"));

92. return INPUT;

93. }catch(Exception e){

94. this.addActionMessage("注册用户失败");

95. return INPUT;

96. }

97. }

98.

99. /**

100. * update User

101. *

102. * @param user

103. * @throw Exception

104. */

105. public void updateUser() throws Exception {

106. userService.updateUser(user);

107. }

108.

109. /**

110. * delete User by id

111. *

112. * @param id

113. * @throw Exception

114. */

115. public void deleteUser(Long id) throws Exception {

116. userService.deleteUser(id);

117. }

118.

119. }

背着蜗牛闯世界的Jillion

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Struts2 + JQuery + JSON实现AJAX

网上关于这方面的资料也不少，但多半是struts1的，在Struts2中使用JSON可以更容易实现数据的异步传输。先做好准备工作: 1.Struts2相关lib, 注意将struts2 lib下面的以json开头的包也加入到工程。 2.JSON Plugin，它可以将Struts2 Action中的结果直接返回为JSON。下载地址：http://jsonplugin...
复制链接

扫一扫

专栏目录