What do hx-get, hx-post, hx-put, hx-patch and hx-delete do, and how are values sent?

Summary

Each issues a request with that HTTP method to the given URL when the element is triggered. An element sends its own value; a form sends its fields; a non-GET request inside a form also sends the form's fields. In htmx 2, GET and DELETE put values in the query string; POST, PUT and PATCH send them form-encoded in the body.

Longer Answer

Use methods as HTTP intends: GET for reads (never side effects), POST to create or run actions, PUT/PATCH to update, DELETE to remove. Extra values come from hx-include (other elements), hx-vals (JSON) and can be filtered with hx-params. Many servers ignore DELETE bodies, which is one reason htmx 2 moved DELETE values to the URL.

Key Points

• One attribute per HTTP method.
• Element, form and enclosing-form values.
• GET/DELETE: query string; others: body.
• hx-include, hx-vals, hx-params add or filter values.

Deep dive: htmx Tutorial: AJAX Requests