Struts2 整合jQuery實現Ajax功能

Struts2 整合jQuery實現Ajax功能

技術領域不少東西流行，天然有流行的道理，這幾天用了jQuery，深感有些人真是聰明絕頂，能將那麼多技術融合的如此完美。

首先明確個概念：

jQuery是什麼：是使用javascript語言開發的，用於知足項目前臺各類操做須要的js程序文件。也就是說，jQuery基本上就是個js程序集，基礎核心是jQuery.js文件。

l  固然根據不一樣的版本具體的表現形式：

jQuery.1.6.js或者jquery-1.5.1.js

這個是版本號的不一樣，具體有哪些區別，還沒發現。

l  還有這種形式

jquery-1.5.1.min.js（緊縮格式，取消回車，一行代碼）

l  根據應用需求的不一樣，jQuery

1           引入jQuery

項目中引入jQuery

l  下載jQuery：http://docs.jquery.com/Downloading_jQuery

l  添加核心文件：將核心的jQuery文件複製到項目中。

        <SCRIPT type="text/javascript" src="js/jquery/jquery-1.6.js"></script>

        <SCRIPT type="text/javascript">

            function checkkey()

            {   

                            …………使用jQuery技術自定義的代碼…………

            }

        </SCRIPT>

 

2           jQuery的Ajax

jQuery的內容很是龐雜，能夠解決諸多方面的需求，主要包括：Ajax，頁面效果，頁面驗證。

做爲J2ee項目，我主要關注了一下Ajax和頁面驗證。

jQuery的Ajax很簡單，僅僅使用核心文件jQuery.js就能夠實現了。對於這個方面的應用，以下網站的介紹最淺顯，最直接：http://www.w3school.com.cn/jquery/ w3c夠權威嗎？呵呵。

函數	描述
jQuery.ajax()	執行異步 HTTP (Ajax) 請求。
jQuery.get()	使用 HTTP GET 請求從服務器加載數據。
jQuery.getJSON()	使用 HTTP GET 請求從服務器加載 JSON 編碼數據。
jQuery.post()	使用 HTTP POST 請求從服務器加載數據。

有關Ajax的方法有不少，這裏只簡單研究了三種（其實就一種jQuery.ajax()），其它的都是jQuery.ajax()的簡寫形式。

具體格式，上述網站說的已經很是清楚了，記住以下格式就能夠。

$.ajax({

  type: 'POST',         //提交方法

  url: url,                            //提交的地址

  data: data,                 //提交的參數

  success: success,         //成功後，回調的函數名

  dataType: dataType     //返回的數據類型

});

示例：

post的示例：使用ajax（）的簡化格式post（）方法：中間有三個參數：url，data（json格式），回調函數（回調函數能夠定義在他處，此處僅寫函數名）

$.post("test.jsp",

{ name: "John", time: "2pm" },

     function(data){

          alert("Data Loaded: " + data);

   });

3           Struts2整合jQuery

Struts2中主要的業務操做都是經過Action來完成的，此時就須要jQuery來訪問Struts2的Action。

$.post("Action", ……)

3.1          Login.jsp頁面：

 

l  功能：用戶登陸，首先須要輸入公司標識碼：

l  正確：顯示對勾；

l  錯誤：顯示紅叉；

l  jQuery代碼：

        <SCRIPT type="text/javascript" src="js/jquery/jquery-1.6.js"></script>

        <SCRIPT type="text/javascript">

            function checkkey(){   

                var url = 'getKeyExist';

                var params = {companyKey:$('#ckey').attr('value')};

                 $('#warn').html("<img src='image/ajax/wait.gif'/>");

                jQuery.post(url, params, callbackFun);

            }

            function callbackFun(data){

                $('#warn').html(data);

            }

        </SCRIPT>

l  HTML：當文本框失去焦點時，觸發回調事件。

<DIV class=line><LABEL class=big id=lblName>公司標識</LABEL>

<INPUT id='ckey' name="ckey" onblur="checkkey();"><span id="warn"></span>

 </DIV>

l  說明：

n  當文本框‘ckey’失去焦點時：調用「checkkey」函數；

n  「checkkey」函數分別肯定兩個信息：

u  異步訪問：'getKeyExist'——判斷標識是否正確的Action類。

u  參數：{companyKey:$('#ckey').attr('value')}，一個以json格式拼寫的參數。

u  注：Json的對象格式：

 

 

 

 

 

 

u  發出異步請求：jQuery.post(url, params, callbackFun);

 

3.2          Action代碼：

傳統的Action都是返回String，根據String的不一樣決定forward到不一樣的Jsp頁面，這給Ajax帶來麻煩。我當初仍是走了些彎路。

 

3.2.1    經過Jsp獲得回調信息

就是說：

 

Login.jsp

jQuery.post( )

Action

message.jsp

 

 

 

 

 

 

 

 

 

 

 

l  Action:

       private String companyKey;

       private String remessage;

       @Override

       public String execute() throws Exception {

              String remessage="";

              List<Company> complist=companydao.findByCompanyKey(companyKey);

              if(complist.size()>0)

                     remessage="<img src=’image/ajax/yes.gif’/> ";

              else

                     remessage="<img src=’image/ajax/no.gif’ /> ";               

              return SUCCESS;

}

       public final void setCompanyKey(String companyKey) {

              this.companyKey = companyKey;

       }

       public final String getRemessage() {

              return remessage;

       }

 

l  Struts.xml：

              <action name=" getKeyExist " class="ResponseMessageAction" >

                     <result name="success">/ajax/message.jsp</result>

              </action>

l  message.jsp：爲了保證取得響應信息，jsp文件中只有Jsp指令

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

<%@ taglib prefix="s" uri="/struts-tags" %> <%

String path = request.getContextPath();

String basePath =

request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<s:property value=" remessage " />

l  問題：

n  繁瑣；

n  上述的方法，在得到響應的信息時，因爲是經過一個jsp頁面取得，雖然jsp頁面中僅有jsp指令，可是結果仍然會有不少空行，影響取得信息。

 

3.2.2    Action自主完成響應：

後來發現，Action也能夠自主完成響應，不須要Jsp的支持。代碼修改以下：

l  Action：新建了個方法getKeyExist，不提供返回值。

              if(complist.size()>0)

                     remessage="<img src=’image/ajax/yes.gif’/> ";

              else

                     remessage="<img src=’image/ajax/no.gif’ /> ";               

              HttpServletResponse response = ServletActionContext.getResponse();

        response.setCharacterEncoding("UTF-8");     

        response.getWriter().write(remessage);    

l  struts.xml:從新創建了無結果result；

       <action name="getKeyExist" class="ResponseMessageAction" method="getKeyExist">

       </action>

l  此時獲得的響應就簡單幹淨了不少。

 

3.2.3    Action響應Json格式信息：

上述方法已經能夠獲得響應的信息，可是在不少狀況下，還須要對響應的結果進行區分，來決定不一樣的顯示效果，此時，響應值就要攜帶更多的信息，也就是說不是簡單的一個字符串，而是一個對象。那麼使用Json格式相對來講就比較方便（3.1提到了Json的對象格式）。

 

l  Action：響應信息改成json格式；

              if(complist.size()>0){

                     remessage="{type:'yes',show:'<img src=\"image/ajax/yes.gif\" />'}";

              }

              else{

                     remessage="{type:'no',show:'<img src=\"image/ajax/no.gif\" />'}";                                 }

 

l  jQuery：回調結果

            function callbackFun(data){

                  eval('json=' + data + ';');

                  if(json.type=='no'){

                         $('#ckey').focus();

                  }    

                $('#warn').html(json.show);

}