HTMX - Requests

HTMX can trigger requests based on various events. The most common attributes used to trigger requests are listed below.

• hx-get: This attribute is used to issue a GET request.
• hx-post: This attribute is used to issue a POST request.
• hx-put: This attribute is used to issue a PUT request.
• hx-patch: This attribute is used to issue a PATCH request.
• hx-delete: This attribute is used to issue a DELETE request.

Example: When the button is clicked, it will send a POST request to "/submit" and update the element with id "response-div" with the response.

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

Request Headers

HTMX automatically includes several useful headers in its requests. You can also set custom headers using the hx-headers attribute.

• HX-Request: Always set to "true" for HTMX requests.
• HX-Trigger: The id of the element that triggered the request.
• HX-Trigger-Name: The name of the element that triggered the request.
• HX-Target: The id of the target element to be updated.

Example: Setting custom headers using the hx-headers attribute.

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

Request Parameters

HTMX will automatically include form values in its requests. For GET requests, these are added to the URL as query parameters. Other types of requests, are included in the request body. You can also specify additional parameters using the hx-vals attribute.

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