Полный список hx-атрибутов

HTMX предоставляет набор атрибутов, которые значительно упрощают работу с динамическим контентом на веб-странице. Эти атрибуты позволяют легко интегрировать AJAX-запросы, обновлять элементы страницы, и взаимодействовать с сервером без необходимости использовать сложные JavaScript-библиотеки. Рассмотрим подробный список всех доступных атрибутов библиотеки HTMX.

hx-get

Этот атрибут инициирует HTTP-запрос методом GET. Он используется для асинхронной загрузки данных с сервера. Запрос отправляется, когда происходит событие, указанное в атрибуте hx-trigger.

Пример:

<button hx-get="/api/data" hx-target="#content">Загрузить данные</button>

В данном примере, при нажатии на кнопку будет отправлен GET-запрос на сервер по указанному адресу, и ответ будет вставлен в элемент с id content.

hx-post

hx-post работает аналогично hx-get, но использует метод POST для отправки данных на сервер. Этот атрибут часто применяется для отправки форм, а также для любых действий, требующих изменения данных на сервере.

Пример:

<form hx-post="/submit-form" hx-target="#response">
  <input type="text" name="username">
  <button type="submit">Отправить</button>
</form>

При отправке формы будет выполнен POST-запрос на сервер, и ответ будет помещен в элемент с id response.

hx-put

Атрибут hx-put отправляет HTTP-запрос методом PUT. Это полезно для обновления данных на сервере, например, для обновления существующих записей в базе данных.

Пример:

<button hx-put="/update-item" hx-target="#item-1">Обновить элемент</button>

При нажатии на кнопку будет отправлен PUT-запрос с обновленными данными.

hx-delete

Этот атрибут отправляет запрос методом DELETE, который обычно используется для удаления ресурсов на сервере.

Пример:

<button hx-delete="/delete-item" hx-target="#items-list">Удалить элемент</button>

Когда кнопка нажата, отправляется DELETE-запрос для удаления ресурса, и ответ обновляет список элементов.

hx-patch

hx-patch отправляет HTTP-запрос методом PATCH, который используется для частичного обновления данных на сервере.

Пример:

<button hx-patch="/patch-item" hx-target="#item-2">Частичное обновление</button>

Отправляется PATCH-запрос для частичного обновления данных элемента.

hx-trigger

Атрибут hx-trigger определяет событие, которое должно активировать запрос. Это может быть любое событие DOM, например, клик мыши, изменение значения в поле формы или наведение курсора.

Пример:

<input hx-get="/search" hx-trigger="keyup" hx-target="#results">

Каждый раз, когда происходит событие keyup (отпускание клавиши), будет выполнен GET-запрос на сервер для поиска данных, и результат будет помещен в элемент с id results.

hx-target

Атрибут hx-target указывает, в какой элемент страницы будет вставлен результат запроса. Он принимает CSS-селектор элемента, в который нужно вставить ответ от сервера.

Пример:

<div hx-get="/new-content" hx-target="#content"></div>

Ответ с сервера будет вставлен в элемент с id content.

hx-swap

hx-swap определяет, как именно будет происходить замена содержимого целевого элемента. По умолчанию используется значение innerHTML, но можно указать различные способы замены, такие как outerHTML, beforeend, afterend и другие.

Пример:

<div hx-get="/new-data" hx-target="#data" hx-swap="outerHTML"></div>

Ответ от сервера заменит весь элемент #data на новый контент, который пришел от сервера.

hx-select

Атрибут hx-select позволяет выбрать часть данных из ответа сервера для вставки в целевой элемент. Он использует CSS-селектор для выбора нужного фрагмента данных из ответа.

Пример:

<div hx-get="/get-part" hx-select=".part" hx-target="#content"></div>

Из ответа, содержащего несколько элементов, будет извлечен элемент с классом part, который затем будет вставлен в элемент #content.

hx-params

Атрибут hx-params управляет тем, какие параметры будут отправлены в запросе. По умолчанию HTMX отправляет все данные формы или атрибуты, связанные с элементом, инициирующим запрос. Но можно ограничить этот список, указав нужные параметры.

Пример:

<form hx-post="/submit" hx-params="username">
  <input type="text" name="username">
  <input type="text" name="email">
  <button type="submit">Отправить</button>
</form>

В этом примере будет отправлен только параметр username, а не все поля формы.

hx-indicator

Атрибут hx-indicator указывает элемент, который будет отображаться в момент загрузки запроса. Обычно используется для отображения индикатора загрузки или анимации, когда выполняется асинхронная операция.

Пример:

<button hx-get="/load-content" hx-target="#content" hx-indicator="#loading">Загрузить</button>

Когда запрос отправляется, элемент с id loading будет видим, и его можно использовать для отображения индикатора загрузки.

hx-include

Атрибут hx-include позволяет добавить дополнительные данные в запрос, которые будут отправлены вместе с основными данными запроса. Это может быть полезно, если нужно передавать данные из нескольких элементов.

Пример:

<form hx-post="/submit" hx-include="#hidden-data">
  <input type="text" name="name">
  <div id="hidden-data" style="display:none">secret-value</div>
  <button type="submit">Отправить</button>
</form>

Помимо данных формы, будет отправлен также скрытый элемент #hidden-data.

hx-boost

Атрибут hx-boost позволяет превращать обычные ссылки в запросы HTMX. Это удобно для того, чтобы выполнить загрузку контента без перезагрузки страницы, просто кликая по ссылке.

Пример:

<a href="/page" hx-boost="true">Перейти к странице</a>

При клике на ссылку будет выполнен GET-запрос, и ответ будет загружен без перезагрузки страницы.

hx-disable

Атрибут hx-disable отключает выполнение запроса для конкретного элемента. Это может быть полезно, если нужно временно отключить обработку событий HTMX на каком-то элементе.

Пример:

<button hx-get="/data" hx-disable="true">Отключить запрос</button>

В этом примере запрос не будет выполнен, пока элемент не будет снова активирован.

hx-confirm

Атрибут hx-confirm позволяет добавить подтверждение перед выполнением действия. Это аналог кнопки подтверждения, когда нужно убедиться, что пользователь действительно хочет выполнить определенное действие.

Пример:

<button hx-post="/delete" hx-confirm="Вы уверены?">Удалить</button>

Перед выполнением POST-запроса будет выведено диалоговое окно с подтверждением действия.

hx-headers

Атрибут hx-headers позволяет передавать дополнительные заголовки с запросами. Это полезно, когда нужно передать информацию о сессии или другие метаданные.

Пример:

<button hx-get="/data" hx-headers='{"Authorization": "Bearer token"}'>Загрузить данные</button>

В данном примере запрос будет включать заголовок Authorization с токеном.

Заключение

HTMX предоставляет гибкие инструменты для работы с асинхронными запросами и динамическим контентом на веб-страницах. Знание и использование этих атрибутов позволяет значительно упростить разработку и повысить интерактивность сайтов, минимизируя необходимость использования сложного JavaScript.