HTMX - AJAX

---

---

HTMX 的主要目的是直接從 HTML 傳送 AJAX 請求，無需使用 JavaScript，這可以透過 HTMX 屬性實現。當觸發特定事件時，以下列出的屬性之一將向給定的 URL 發起 AJAX 請求。

HTMX 屬性

下面列出了最常用的屬性，這些屬性用於直接從 HTML 傳送 AJAX 請求。每個屬性都接收一個 URL 來發出 AJAX 請求。

• hx-get: 此屬性對給定的 URL 執行 GET 請求。
• hx-post: 此屬性對給定的 URL 執行 POST 請求。
• hx-put: 此屬性對給定的 URL 執行 PUT 請求。
• hx-patch: 此屬性對給定的 URL 執行 PATCH 請求。
• hx-delete: 此屬性對給定的 URL 執行 DELETE 請求。

HTMX 中 AJAX 請求的示例

當元素被觸發時，該元素將向給定的 URL 發出指定型別的請求。

觸發請求

AJAX 請求由自然事件觸發，例如元素上的滑鼠移入或移出。像輸入框、文字區域和選擇框在更改事件時觸發。表單在提交事件時觸發，其他元素在點選事件時觸發。要自定義這些行為，可以使用 hx-trigger 屬性指定哪個事件將是請求的原因。

<div hx-post="/mouse_leave" hx-trigger="mouseleave">
 [Here Mouse, Mouse!]
</div>

觸發器修飾符：如果希望請求只觸發一次，可以修改行為，只需為觸發器新增 once 關鍵字。您可以檢視下面列出的修飾符。

• once: 僅觸發一次請求。
• changed: 如果元素的值已更改，則觸發請求。
• delay:<時間間隔>: 在給定時間後觸發請求，如果再次觸發，則倒計時將從頭開始。
• throttle:<時間間隔>: 與延遲相同，但如果事件在限制結束前發生，則該事件將被丟棄。因此，請求將在時間結束時觸發。
• from:<CSS 選擇器>: 等待不同元素的事件。這可用於在鍵盤快捷鍵上觸發請求。

<div hx-post="/mouse_leave" hx-trigger="mouseleave once">
 [Here Mouse, Mouse!]
</div>

觸發器過濾器：您可以應用觸發器過濾器來觸發請求。為此，您可以在事件名稱後使用方括號 ([])。以下示例僅在元素的 Control-Click 上觸發。

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">
 Control Click
</div>

特殊事件：有一些特殊事件可用於 hx-trigger 屬性。

• load: 元素首次載入時觸發。
• revealed: 元素首次滾動到視口時觸發。
• intersect: 元素首次與視口相交時觸發。這支援兩個附加選項
  • root:<選擇器>: 交叉點的根元素的 CSS 選擇器。
  • threshold:<浮點數>: 0.0 到 1.0 表示觸發事件所需的交叉量。

如果您有高階用例，還可以使用自定義事件來觸發請求。

輪詢：當您希望元素不等待事件時，可以透過使用 every 作為 hx-trigger 屬性的值，在元素上設定輪詢。

如下面的虛擬碼所示，它每 2 秒發出一次對 /content 的 GET 請求，並將響應載入到 div 元素中。

<div hx-get="/content" hx-trigger="every 2s"></div>

載入輪詢：還有另一種輪詢，即載入輪詢，其中元素指定一個帶有指定時間延遲的 load 觸發器，並用響應替換自身。

<div hx-get="/messages"
 hx-trigger="load delay:1s"
 hx-swap="outerHTML"
>
</div>

請求指示器

發出 AJAX 請求時，您需要通知使用者請求已啟動。您可以對子元素使用 htmx-indicator 類，如下面的虛擬碼所示。

<button hx-get="/click">
 Click Me!
    <img class="htmx-indicator" src="/spinner.gif">
</button>

在此程式碼中，我們有一個按鈕，當單擊該按鈕時，將觸發 GET 請求，並且此時將彈出一個載入動畫，向用戶顯示 AJAX 請求已啟動。

目標

您可以使用 hx-target 屬性設定要載入請求響應的元素。在此程式碼中，您可以看到請求的響應將呈現到 div#search-results 元素上。

<input type="text" name="q"
 hx-get="/trigger_delay"
 hx-trigger="keyup delay:500ms"
 hx-target="#search-results"
>
<div id="search-results"></div>

交換

內容替換目標元素的 innerHTML。您可以使用 hx-swap 屬性修改此行為。有一些預定義的值，例如 innerHTML、outerHTML、afterbegin 等值。

• 變形交換：變形交換嘗試將新內容合併到現有 DOM 中。
• 檢視過渡：檢視過渡 API 允許開發人員在不同的 DOM 狀態之間建立動畫過渡，但目前並非所有瀏覽器都支援它。
• 交換選項：當您使用 hx-swap 屬性時，交換中有一些特定的選項。

交換修飾符出現在指定交換樣式之後，並用冒號分隔。

同步

透過使用 hx-sync 屬性在兩個元素之間執行同步。當您希望來自一個元素的請求取代另一個元素的請求，或等待另一個元素的請求完成時，這將是必需的。

CSS 過渡

HTMX 支援無需使用 JavaScript 即可進行過渡，這是 HTMX 最好的特性之一。

<div id="div1">Original Content</div>

<div id="div1" class="red">New Content</div>

.red {
 color: red;
 transition: all ease-in 1s ;
}

兩個 div 具有相同的 id 和第二個元素上的紅色類，因此當 HTMX 交換此新內容時，定義的 CSS 將應用於新內容。

帶外交換

如果要將響應中的內容直接交換到 DOM 中，可以使用 hx-swap-oob 屬性，其值為 true。

<div id="message" hx-swap-oob="true">Swap me directly!</div>

引數

對於觸發 AJAX 請求的元素，引數是必需的。導致請求的元素將包含其值（如果存在）。如果元素是表單，它將包含其中所有輸入的值。

• 檔案上傳：如果要透過 htmx 請求上傳檔案，可以將 hx-encoding 屬性設定為 multipart/form-data。
• 額外值：可以透過使用 hx-values 屬性新增額外值。

確認請求

在觸發和請求之前，最好確認請求，為此可以使用 hx-confirm 屬性。這允許您使用簡單的 javascript 對話方塊確認操作。

<button hx-delete="/account" hx-confirm="Are you sure?">
 Delete My Account
</button>