Day10 - HTMX 表單參數

Genos
2023-09-25 23:59:55

基本應用

在前面的許多範例裡，都會使用到 form 來觸發 AJAX，HTMX 中跟隨原生的 form 操作方式，觸發 submit 時，所有 form 裡面的輸入欄位會依照 name 的屬性值來做為欄位名稱（GET 方法不會有值）

hx-include

hx-include 這個屬性可以設置 CSS 選擇器讓 AJAX 的請求包含其他輸入欄位，範例如下：



        Register!

Enter email:


上面的範例並沒有使用 form，而是直接使用 hx-include 來指定需要的欄位和值

如果 hx-include 選擇到的元素不是一個輸入元素，則會使用這個元素底下所有輸入元素的欄位和值，例如：指定一個包含三個 input 的 div，則取得三個 input 的欄位和值

hx-params

與上面相反，hx-params 用來過濾要加入的欄位和值，以下是可以設置的屬性：

: 預設值，使用所有選到的欄位值

none: 全部都不要

<param-list>: 包含 param-list 裡面列出的欄位（使用逗點分隔）

not <param-list> - 排除 param-list 裡面列出的欄位（使用逗點分隔）


    Get Some HTML, Including Params


上方範例會把所有取得的參數當做 query 加到 GET 請求中

參考資料：https://htmx.org/docs/#parameters