手记

SSH+jquery+ajax奇葩整合

近期学习了SSH2(Struts2+Spring+Hibernate)的整合后,开始尝试的写一个登陆界面,结果发现:若是单单使用struts2来进行页面跳转的话页面的效果不怎么样,同时也无法进行局部刷新(即异步提交验证)。

于是,我开始在网上搜索解决的办法,有些说通过一个隐藏的iframe来达到效果,当我总觉得麻烦和不实用。后来问了下老师,告诉了我使用ajax可以达到想要的效果,我又发现网上有很多例子都是ajax的,但缺少的就是SSH2(整合好的)和ajax 的整合(ajax使用了jQuery框架)。

说说我想要的效果:

  1. 登录页面点击提交后 进行后台的验证;

  2. 验证成功跳转到index.Jsp;

  3. 验证失败则在本登录页面执行一个jQuery脚本提示用户;

 

 

 

需要的包:

SSH2使用到的包外,还需要struts2的以下包:

 

commons-beanutils-1.8.0.jar

commons-collections-3.1.jar

commons-fileupload-1.3.1.jar

commons-io-2.2.jar

commons-lang-2.4.jar

commons-lang3-3.1.jar

commons-logging-1.1.3.jar

ezmorph-1.0.6.jar

freemarker-2.3.19.jar

json-lib-2.3-jdk15.jar

ognl-3.0.6.jar

struts2-core-2.3.16.3.jar

struts2-json-plugin-2.3.16.3.jar

xwork-core-2.3.16.3.jar

 

 

 

好了,开始贴代码:

login.jsp

        

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>会员登陆</title><!--  必须添加jQuery 否则ajax将不启用。--><script type="text/javascript"src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#button").click (function(){varuser =$("#User").val();varpassWord =$("#PassWord").val();     $.ajax({                //这里的需要Struts.xml的<action/>的name属性一致。             url:'login.action',             //提交类型             type:'POST',              //提交数据给Action传入数据              data:{'User':user,'PassWord':passWord},              //返回的数据类型             dataType:'json',              //成功是调用的方法             success:function(data){              //获取Action返回的数据用   data.Action中的属性名  获取                   if(data.result=="false")                   {                      alert("账号密码错误");                   }elseif(data.result=="true"){                     //进行页面跳转,因为ajax我们的Action只返回数据,不在进行跳转了...                   location.href = "index.jsp";                   }                   }            });    });    });</script>  </head>  <body>  账号:<input id="User" name="User"type="text" /><br/>  密码:<input id="PassWord" name="PassWord"type="password"  /><br/>  <input id="button"  type="button"value="提交" />  </body></html>

 

 

LoginAction.java

 

 publicclass LoginAction extends ActionSupport  {    //使用@Resource注解注入条件属性名与 ref要一致才可    @Resource    FUserService fUserServiceImp;    @Resource    FUser fUser;        private String User;    private String PassWord;    private String result;        public String getResult() {       returnresult;    }    publicvoid setUser (String User) {       this.User = User;    }     publicvoid setPassWord(String PassWord) {       this.PassWord = PassWord;    }        public String execute() throws Exception {                  HttpServletRequest request = ServletActionContext.getRequest();       //获取ajax传过来的数据直接使用前台的属性名即可获取。       fUser.setUserEmail(User);       fUser.setUserPassWord(PassWord);        if(fUserServiceImp.CheckUser(fUser)!=null){           //返回给ajax的数据           this.result = "true";       }else{           this.result = "false";       }       return"success";    }}


 

 

Struts.xml

 

<?xml version="1.0"encoding="UTF-8"?> <struts>    <!—这是我们配置SSH时配置Struts的package -->    <package name="Struts" extends="struts-default">       <action name="login"class="loginAction">       </action>    </package>    <!—为了让ajax可以调用Spring中的Action 配置ajax的package -->    <package name="ajax_json" extends="json-default">    <!—本处的id就是ajax url的值,class引用了Spring 配置Action的id-->        <action name="login" class="loginAction">            <result name="success" type="json"/>        </action>              </package></struts>


 

其他SSH2框架整合的不需要改动这样就可以将jQuery框架的ajax整合入SSH2框架使用了!


0人推荐
随时随地看视频
慕课网APP