欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

SSH+Jquery+Ajax框架整合

程序员文章站 2023-10-31 14:07:52
近期学习了ssh2(struts2+spring+hibernate)的整合后,开始尝试的写一个登陆界面,结果发现:若是单单使用struts2来进行页面跳转的话页面的效果不...

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

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

说说我想要的效果:

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

验证成功跳转到index.jsp;

验证失败则在本登录页面执行一个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框架使用了!

以上内容是个人所想,如有不对的地方欢迎给我留言,我会在第一时间和大家取得联系,谢谢大家一直以来对网站的支持。