收藏 分销(赏)

Struts2整合jQuery实现Ajax功能.doc

上传人:xrp****65 文档编号:7680236 上传时间:2025-01-12 格式:DOC 页数:6 大小:73KB 下载积分:10 金币
下载 相关 举报
Struts2整合jQuery实现Ajax功能.doc_第1页
第1页 / 共6页
Struts2整合jQuery实现Ajax功能.doc_第2页
第2页 / 共6页


点击查看更多>>
资源描述
  网上关于这方面的资料也不少,但多半是struts1的,在Struts2中使用JSON可以更容易实现数据的异步传输。       先做好准备工作:       1.Struts2相关lib, 注意将struts2 lib下面的以json开头的包也加入到工程。       2.JSON Plugin,它可以将Struts2 Action中的结果直接返回为JSON。下载地址: (支持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。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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title><s:text name="page.title.login" /></title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("#login").click(function(){ login(); }); }); 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> <input type="button" id="login" value='<s:text name="button.label.login" />' /></form> <div id="result"> </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>   <package name="login" namespace="/" extends="json-default" > <action name="login" class="userAction" method="login" > <result type="json"> <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;    2.    3. import java.util.HashMap;    4. import java.util.List;    5. import java.util.Map;    6.    7. import com.word.vo.User;    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.    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.    31.     public User getUser() {    32.         return user;    33.     }    34.    35.     public void setUser(User user) {    36.         this.user = user;    37.     }    38.    39.     private IUserService userService;    40.    41.     public void setUserService(IUserService userService) {    42.         this.userService = userService;    43.     }    44.    45.     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 list   60.      */   61.     public List<User> findAll() throws Exception {    62.         return userService.findAll();    63.     }    64.    65.     /**   66.      * get User by id   67.      *    68.      * @param id   69.      * @throw Exception   70.      */   71.     public User getUserById(Long id) throws Exception {    72.         return userService.getUserById(id);    73.     }    74.    75.     /**   76.      * create User   77.      *    78.      * @param user   79.      * @throw Exception   80.      */   81.     public String createUser() {    82.         clearErrorsAndMessages();    83.             84.         if(user.getLogName().trim().equals("") ){    85.             this.addActionMessage(getText("error.user.name"));    86.             return INPUT;    87.         }    88.         if(user.getPassword().trim().equals("") ){    89.             this.addActionMessage(getText("error.user.password"));    90.             return INPUT;    91.         }    92.         try{    93.             userService.createUser(user);    94.             this.addActionMessage(getText("user.message.create"));    95.             return INPUT;    96.         }catch(Exception e){    97.             this.addActionMessage("注册用户失败");    98.             return INPUT;    99.         }    100.     }    101.    102.     /**   103.      * update User   104.      *    105.      * @param user   106.      * @throw Exception   107.      */   108.     public void updateUser() throws Exception {    109.         userService.updateUser(user);    110.     }    111.    112.     /**   113.      * delete User by id   114.      *    115.      * @param id   116.      * @throw Exception   117.      */   118.     public void deleteUser(Long id) throws Exception {    119.         userService.deleteUser(id);    120.     }    121.    122. }  
展开阅读全文

开通  VIP会员、SVIP会员  优惠大
下载10份以上建议开通VIP会员
下载20份以上建议开通SVIP会员


开通VIP      成为共赢上传

当前位置:首页 > 教育专区 > 其他

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        抽奖活动

©2010-2026 宁波自信网络信息技术有限公司  版权所有

客服电话:0574-28810668  投诉电话:18658249818

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :微信公众号    抖音    微博    LOFTER 

客服