Struts 2 - Ajax 標籤

Struts 使用 DOJO 框架來實現 AJAX 標籤。首先，要繼續本示例，您需要將 struts2-dojo-plugin-2.2.3.jar 新增到您的類路徑中。

您可以從 Struts2 下載的 lib 資料夾中獲取此檔案 (C:\struts-2.2.3all\struts-2.2.3\lib\struts2-dojo-plugin-2.2.3.jar)

對於此練習，讓我們修改 **HelloWorld.jsp** 如下所示：

<%@ page contentType = "text/html; charset = UTF-8"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>
<%@ taglib prefix = "sx" uri = "/struts-dojo-tags"%>

<html>
   <head>
      <title>Hello World</title>
      <s:head />
      <sx:head />
   </head>
   
   <body>
      <s:form>
         <sx:autocompleter label = "Favourite Colour"
            list = "{'red','green','blue'}" />
         <br />
         <sx:datetimepicker name = "deliverydate" label = "Delivery Date"
            displayformat = "dd/MM/yyyy" />
         <br />
         <s:url id = "url" value = "/hello.action" />
         <sx:div href="%{#url}" delay="2000">
            Initial Content
         </sx:div>
         <br/>
         <sx:tabbedpanel id = "tabContainer">
            <sx:div label = "Tab 1">Tab 1</sx:div>
            <sx:div label = "Tab 2">Tab 2</sx:div>
         </sx:tabbedpanel>
      </s:form>
   </body>
</html>

當我們執行上面的示例時，我們會得到以下輸出：

現在讓我們一步一步地瀏覽這個示例。

首先要注意的是添加了一個新的標籤庫，字首為 sx。這是 (struts-dojo-tags) 特別為 ajax 整合建立的標籤庫。

然後在 HTML 頭部，我們呼叫 sx:head。這會初始化 dojo 框架，並使其準備好頁面內所有 AJAX 呼叫。此步驟很重要 - 如果沒有初始化 sx:head，您的 ajax 呼叫將無法工作。

首先，我們有 autocompleter 標籤。autocompleter 標籤看起來很像一個選擇框。它填充了紅色、綠色和藍色值。但是，選擇框和這個標籤之間的區別在於它會自動完成。也就是說，如果您開始輸入 gr，它將填充為“綠色”。除此之外，此標籤與我們之前介紹的 s:select 標籤非常相似。

接下來，我們有一個日期時間選擇器。此標籤建立一個輸入欄位，並在其旁邊有一個按鈕。當按下按鈕時，會顯示一個彈出日期時間選擇器。當用戶選擇日期時，日期將按照標籤屬性中指定的格式填充到輸入文字中。在我們的示例中，我們指定了 dd/MM/yyyy 作為日期格式。

接下來，我們建立了一個到 system.action 檔案的 url 標籤，我們在之前的練習中建立了該檔案。它不必是 system.action - 它可以是您之前建立的任何 action 檔案。然後，我們有一個 div，其超連結設定為 url，延遲設定為 2 秒。當您執行它時會發生什麼，"初始內容" 將顯示 2 秒，然後 div 的內容將替換為 **hello.action** 執行的內容。

最後，我們有一個簡單的選項卡面板，有兩個選項卡。選項卡本身是 div，標籤為選項卡 1 和選項卡 2。

值得注意的是，Struts 中的 AJAX 標籤整合仍在進行中，並且這種整合的成熟度隨著每個版本的釋出而逐漸提高。

列印頁面