`hx-boost`

Атрибут hx-boost позволяет «усилить» обычные ссылки и формы, чтобы использовать AJAX. Это имеет хороший механизм обратной совместимости, который, если у пользователя не включен JavaScript, сайт продолжит работать.

Для ссылок, при нажатии на ссылку будет выполнен GET запрос к указанному в href URL и будет добавлен URL в историю. Цель — тег <body>, и по умолчанию используется стратегия переключения innerHTML. Все это можно изменить, используя соответствующие атрибуты, за исключением триггера click.

Для форм запрос будет преобразован в GET или POST, в зависимости от метода в атрибуте method, и будет инициирован submit. Опять же, целью будет body страницы, и будет использоваться стратегия переключения innerHTML. Однако, URL не будет добавлен в историю, и запись в истории не будет создана. (Вы можете использовать атрибут hx-push-url, если хотите добавить URL в историю).

Вот пример некоторых усиленных ссылок:

<div hx-boost="true">
  <a href="/page1">Go To Page 1</a>
  <a href="/page2">Go To Page 2</a>
</div>

Эти ссылки отправят ajax GET запрос на соответствующие URL-адреса и заменят внутреннее содержимое тела.

Вот пример усиленной формы:

<form hx-boost="true" action="/example" method="post">
    <input name="email" type="email" placeholder="Enter email...">
    <button>Submit</button>
</form>

Эта форма отправит ajax POST запрос на указанный URL и заменит внутреннее содержимое тела.

Примечания

hx-boost наследуется и может быть помещено на родительский элемент
Только ссылки на тот же домен и не являющиеся локальными якорями будут усилены
Все запросы выполняются через AJAX, поэтому имейте это в виду при выполнении перенаправлений
Чтобы определить, является ли запрос результатом усиленной ссылки или формы, ищите HX-Boosted в заголовке запроса
Выберите отключение усиления для дочерних элементов с помощью hx-boost="false"

Licensed under the Zero-Clause BSD License.
https://htmx.org/attributes/hx-boost/