hx-boost

hx-boost 屬性允許您「提升」一般的錨點和表單標籤以改用 AJAX。這有個很好的回退機制，如果使用者未啟用 JavaScript，網站仍可正常運作。

對於錨點標籤，點擊錨點會發送一個 GET 請求到 href 中指定的 URL，並推送該 URL 以建立歷史記錄。目標是 <body> 標籤，並且預設使用 innerHTML 交換策略。除了 click 觸發器之外，所有這些都可以透過使用適當的屬性進行修改。

對於表單，請求會根據 method 屬性中的方法轉換為 GET 或 POST，並由 submit 觸發。同樣地，目標將是頁面的 body，並且將使用 innerHTML 交換。然而，URL 不會被推送，也不會建立歷史記錄。（如果您希望推送 URL，可以使用 hx-push-url 屬性。）

以下是一些提升連結的範例

<div hx-boost="true">
  <a href="/page1">Go To Page 1</a>
  <a href="/page2">Go To Page 2</a>
</div>

這些連結會對各自的 URL 發出 ajax GET 請求，並將 body 的內部內容替換為請求的內容。

以下是一個提升表單的範例

<form hx-boost="true" action="/example" method="post">
    <input name="email" type="email" placeholder="Enter email...">
    <button>Submit</button>
</form>

這個表單會對指定的 URL 發出 ajax POST 請求，並將 body 的內部內容替換為請求的內容。

注意事項