htmx 是一個開源的前端 JavaScript 函式庫，透過在 HTML 中使用自訂屬性，直接在 HTML 中實現 AJAX、CSS 過渡效果、WebSockets 和伺服器推送事件（Server-Sent Events）等功能，讓開發者能夠以更簡單的方式構建現代化的使用者介面。

主要功能：

  • AJAX 請求： 使用 hx-get、hx-post、hx-put、hx-delete 和 hx-patch 等屬性，直接在 HTML 元素上定義 AJAX 請求，無需撰寫額外的 JavaScript 代碼。

  • CSS 過渡效果： 透過 hx-swap 屬性，指定如何將伺服器回應的內容插入或替換到現有的 DOM 中，並可結合 CSS 過渡效果，實現平滑的介面更新。

  • WebSockets： 支援使用 WebSockets，實現即時的雙向通訊，適用於需要即時更新的應用場景。

  • 伺服器推送事件（SSE）： 透過 SSE 擴充功能，讓伺服器主動推送更新到客戶端，適合用於即時通知或資料流的應用。

以下是一個使用 htmx 的簡單範例，當使用者點擊按鈕時，會透過 AJAX 發送請求，並將回應的內容替換按鈕本身：

<button hx-post="/clicked" hx-swap="outerHTML">
  Click Me
</button>

在這個範例中，hx-post 屬性指定了當按鈕被點擊時，向 /clicked 路徑發送 POST 請求，而 hx-swap="outerHTML" 則表示將按鈕本身替換為伺服器回應的內容。

以下再展示幾個範例：

AJAX 請求（GET 請求）

將表單提交至伺服器 /submit，並在成功後更新 #message 區塊的內容。

<button hx-get="/get-data" hx-target="#result" hx-swap="innerHTML">
  取得資料
</button>

<div id="result">這裡將顯示資料</div>

 

表單提交（POST 請求）

將表單提交至伺服器 /submit，並在成功後更新 #message 區塊的內容。

<form hx-post="/submit" hx-target="#message" hx-swap="innerHTML">
  <input type="text" name="name" placeholder="輸入姓名" required>
  <button type="submit">提交</button>
</form>

<div id="message"></div>

 

自動更新內容

每隔 5 秒鐘自動向 /status 發送請求，並更新顯示的狀態內容。

<div hx-get="/status" hx-trigger="every 5s" hx-target="#status" hx-swap="innerText">
  取得最新狀態
</div>

<div id="status">載入中...</div>

 

點擊後載入更多內容

當按鈕被點擊時，向 /load-more 發送請求，並將回應的內容追加到現有的列表中。

<ul id="items">
  <li>初始項目 1</li>
  <li>初始項目 2</li>
</ul>

<button hx-get="/load-more" hx-target="#items" hx-swap="beforeend">
  載入更多
</button>

 

使用 WebSockets 即時更新

使用 WebSockets 與伺服器建立即時連接，當伺服器發送新資料時自動更新內容。

<div hx-ws="connect:/live-updates">
  這裡將即時更新資料
</div>

htmx 透過在 HTML 中引入自訂屬性，讓開發者能夠更直觀地實現複雜的互動行為，減少對 JavaScript 的依賴，提升開發效率。其輕量化和高相容性的特性，使其成為構建現代化網頁應用的有力工具。