HTMX - 请求

HTMX 可以根据各种事件触发请求。下面列出了用于触发请求的最常见属性。

• hx-get:此属性用于发出 GET 请求。
• hx-post:此属性用于发出 POST 请求。
• hx-put:此属性用于发出 PUT 请求。
• hx-patch:此属性用于发出 PATCH 请求。
• hx-delete:此属性用于发出 DELETE 请求。

示例:单击按钮时，它将向 "/submit" 发送 POST 请求，并使用响应更新 id 为 "response-div" 的元素。

<button hx-post="/submit" hx-target="#response-div">
 Submit
</button>

请求标头

HTMX 会自动在其请求中包含几个有用的标头。您还可以使用 hx-headers 属性设置自定义标头。

• HX-Request:对于 HTMX 请求，始终设置为"true"。
• HX-Trigger:触发请求的元素的 ID。
• HX-Trigger-Name:触发请求的元素的名称。
• HX-Target:要更新的目标元素的 ID。

示例:使用 hx-headers 属性设置自定义标头。

<button hx-post="/submit" hx-headers='{"My-Custom-Header": "Value"}'>
 Submit
</button>

请求参数

HTMX 将自动在其请求中包含表单值。对于 GET 请求，这些值将作为查询参数添加到 URL。其他类型的请求则包含在请求正文中。您还可以使用 hx-vals 属性指定其他参数。

<button hx-post="/submit" hx-vals='{"extra": "data"}'>
 Submit
</button>