首頁 > web前端 > js教程 > 主體

SSH+Jquery+Ajax框架整合

亚连
發布: 2018-05-24 15:43:48
原創
2361 人瀏覽過

這篇文章跟大家介紹基於SSH Jquery Ajax整合實現局部刷新,有興趣的朋友一起看看本文吧

近期學習了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="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>
登入後複製

上面是我整理給大家的,希望未來會對大家有幫助。

相關文章:

透過建構AJAX參數實作表單元素JSON相互轉換

SpringMVC環境下實作的Ajax非同步請求JSON格式資料

ajax回呼開啟新窗體防止瀏覽器攔截有效方法_AJAX相關

以上是SSH+Jquery+Ajax框架整合的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!