当前位置:文档之家› Struts2+JQuery+JSON实现AJAX

Struts2+JQuery+JSON实现AJAX

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

先做好准备工作:1.Struts2相关lib, 注意将struts2 lib下面的以json开头的包也加入到工程。

2.JSON Plugin,它可以将Struts2 Action中的结果直接返回为JSON。

下载地址:/files/jsonplugin-0.34.jar(支持struts2.1.6及以上版本)。

3.JQuery,JS的一个lib. 下载地址:(最新版本为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。

lHtml代码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""/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.//*************************************************准备过程12.$(document).ready(function(){13. $("#login").click(function(){14. login();15. });16.});17.//*************************************************进入设置18.function login(){19. var url = "login.html";20. var params = {"user.logName":$("#name").attr("value"),"user.password":$("#password").attr("value")};21.//*****************************************回滚输出22. $.getJSON(url,params,function callback(data){23. // convert to json object24. var user = eval("("+data+")");25. $("#result").each(function(){26. $(this).html('welcome ,' + );27. });28. });29. }30.</script>31.</head>32.<body>33.<s:actionmessage/>34.<form method="post"id="form"><s:text35. name=""/>:<input type="textbox"name="user.logName"id="name"36. value='${param["user.logName"]}'/><br>37.<s:text name="bel.password"/>:<input type="password"id="password"38. name="user.password"/><br>39.<input type="button"id="login"value='<s:text name="bel.login" />'/></form>40.<div id="result">41.42.</div>43.</body>44.</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" > <result type="json">3.<param name="root">result</param>4.</result>5.</action>6.</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;2.3.import java.util.HashMap;4.import java.util.List;5.import java.util.Map;6.7.import er;8.9.import net.sf.json.JSONObject;10.11.import org.apache.poi.hssf.record.formula.eval.AddEval;12.import ponents.ActionError;13.import ponents.ActionMessage;14.import org.apache.struts2.interceptor.validation.JSONValidationInterceptor;15.16.import com.opensymphony.xwork2.ActionSupport;17.import com.word.service.IUserService;18.//开始定义一个JavaBean19.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.31. public User getUser() {32. return user;33. }34.35. public void setUser(User user) {36. er = user;37. }38.39.private IUserService userService;40.41. public void setUserService(IUserService userService) {42. erService = userService;43. }44.//设置登录将hash转换成Json45. public String login() throws Exception {46.47. Map map = new HashMap();48. map.put("name", user.getLogName());49. map.put("password",user.getPassword());50. JSONObject obj = JSONObject.fromObject(map);51.52.53. result = obj.toString();54.55. return SUCCESS;56. }57.58. /**59. * get User list60. */61.public List<User> findAll() throws Exception {62. return userService.findAll();}63. /**64. * get User by id65. *66. * @param id67. * @throw Exception68. */69.public User getUserById(Long id) throws Exception{70. return userService.getUserById(id);} /**71. * create User72. *73. * @param user74. * @throw Exception75. */76.//创建一个User77. public String createUser() {78. clearErrorsAndMessages();79.80. if(user.getLogName().trim().equals("") ){81. this.addActionMessage(getText(""));82. return INPUT;83. }84. if(user.getPassword().trim().equals("") ){85. this.addActionMessage(getText("er.password"));86. return INPUT;87. }88. try{erService.createUser(user);90. this.addActionMessage(getText("user.message.create"));91. return INPUT;92. }catch(Exception e){93. this.addActionMessage("注册用户失败");94. return INPUT;95. }96. }97.98. /**99. * update User100. *101. * @param user102. * @throw Exception103. */104.//更新User105. public void updateUser() throws Exception {erService.updateUser(user);107. }108.109. /**110. * delete User by id111. *112. * @param id113. * @throw Exception114. */115.//删除User116. public void deleteUser(Long id) throws Exception { erService.deleteUser(id);118. }119.120.}。

相关主题