SSH+jquery+ajax奇葩整合

发布时间：2020-07-04 20:54:04 作者：ky673671303
来源：网络阅读：2243

近期学习了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

好了，开始贴代码：

<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框架使用了！

以上内容个人言论，如果有什么地方不对，请大家留意…我会努力改正！

好了，祝大家幸福愉快！

SSH+jquery+ajax奇葩整合

相关阅读