Day3 - 如何使用 HTMX 操作 AJAX ?

Genos
2023-09-18 23:27:31

Form Methods

先來 MDN 回顧一下，原生的 form 僅提供 GETPOST 兩種方法
（MDN Doc： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form ）

HTMX 則是補齊了各種 method，讓我們可以直接在屬性上操作這些行為：

hx-get

hx-post

hx-put

hx-patch

hx-delete

接下來做一點簡單的練習，我使用 Reqres（https://reqres.in/ ）這個簡易的 API 練習服務來串接 POST 和 PUT 方法，沒寫任何 JavaScript 就完成了！

<button
  hx-post="https://reqres.in/api/users"
  hx-target="#post-result"
>
  Post a new data


Post result:





<button
  hx-put="https://reqres.in/api/users/456"
  hx-target="#put-result"
>
  Put a data by ID 456


Put result:



以上程式碼也放到 Codepen 上 https://codepen.io/pb220416/pen/RwELoVE

如果有仔細玩這些功能會發現幾個問題：

1. 只能將 Response 的資料直接塞到 element 裡面渲染，無法像 SPA 一樣由資料生成畫面，所以需要在後端渲染結果

2. 這次使用的免費 API，針對指定資料的操作請求都是放在 url 上（/api/users/{id}），但是找了文件和相關資訊，沒有發現針對 path 的屬性可以使用，也就是要改 url 的話還是得撰寫 JavaScript（所以上方的練習就先直接寫死一個 id）

目前玩下來，雖然還沒非常深入，但從前端的角度會覺得 HTMX 有許多不方便的地方，官方文件的 DEMO 中也有一些是直接在屬性中寫 JavaScript，如果網站複雜度提高，可能維護起來真的會相當不容易