Атрибут hx-boost

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

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

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

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

<div hx-boost="true">
  <a href="/page1">Перейти к странице 1</a>
  <a href="/page2">Перейти к странице 2</a>
</div>

Эти ссылки отправят AJAX GET запросы на соответствующие URL и заменят содержимое <body> на полученный ответ.

Вот пример «ускоренной» формы:

<form hx-boost="true" action="/example" method="post">
  <input name="email" type="email" placeholder="Введите имейл...">
  <button>Отправить</button>
</form>

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

Примечания

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