hx-action

Синтаксис

<button hx-action="/api/users" hx-method="post">
    Create User
</button>

Постепенное улучшение

Как и hx-boost, hx-action поддерживает постепенное улучшение — если JavaScript недоступен, браузер использует нативные action/method. В то время как hx-boost задаёт значения по умолчанию для навигации по страницам (цель — body, прокрутка вверх, добавление URL в историю) для <a> и <form>, hx-action даёт вам полный контроль над этим поведением и работает с любым элементом.

<!-- Works natively AND with htmx -->
<form hx-action="/contacts" method="post" hx-target="#results">
    <input name="name" required>
    <button>Create Contact</button>
</form>

В отличие от hx-boost (который всегда отправляет запрос на тот же URL, что и нативный href/action), hx-action при необходимости может указывать на другой URL. По-прежнему рекомендуется проверять заголовки запросов htmx и возвращать фрагменты с того же URL, но если предпочтительно использовать отдельные конечные точки, hx-action позволяет это сделать:

<form action="/contacts/new"               <!-- full page (no-JS fallback) -->
      hx-action="/fragments/contacts/new"  <!-- separate partial endpoint -->
      method="post"
      hx-target="#contact-list">
    <input name="name" required>
    <button>Create</button>
</form>

Определение метода

htmx определяет HTTP-метод в следующем порядке:

1. Краткая форма атрибута элемента (hx-get, hx-post, hx-put, hx-patch, hx-delete, hx-query)
2. Атрибут hx-method элемента
3. Атрибут formmethod кнопки отправки формы
4. Нативный атрибут method формы
5. По умолчанию — GET

Краткая форма атрибута задаёт URL и метод одновременно, поэтому она имеет приоритет над hx-method. hx-action задаёт только URL. Если у элемента есть hx-action, htmx не учитывает атрибуты краткой формы, и применяется hx-method.

Остальные шаги совпадают с цепочкой резервных значений, которую используют браузеры.

Это означает, что кнопки отправки формы с formmethod работают ожидаемым образом:

<form hx-action="/contacts/123" method="get" hx-target="#detail">
    <button>View</button>
    <button formmethod="delete">Delete</button>
</form>

При нажатии «Просмотр» отправляется GET-запрос, а при нажатии «Удалить» — DELETE-запрос, что соответствует нативной семантике форм.

Когда использовать

Примечания

• hx-action обычно используется вместе с hx-method, чтобы задать URL и HTTP-метод
• Атрибуты краткой формы, такие как hx-get, hx-post и т. д., задают URL и метод одновременно

Пример

<!-- Server-rendered dynamic method -->
<button hx-action="/api/users/123" hx-method="${method}">
    ${action_label}
</button>

<!-- Equivalent to hx-post shorthand -->
<button hx-action="/api/users" hx-method="post">
    Create User
</button>
<!-- same as -->
<button hx-post="/api/users">
    Create User
</button>