DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> SSH+Jquery+Ajax框架整合
SSH+Jquery+Ajax框架整合
編輯: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="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框架使用了!

以上內容是個人所想,如有不對的地方歡迎給我留言,我會在第一時間和大家取得聯系,謝謝大家一直以來對網站的支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved