itProger Видеокурсы Изучение HTMX с нуля / Проект на HTMX и Flask #6 – Расширенные возможности

#6 – Расширенные возможности

За урок вы изучите дополнительные специальные атрибуты HTMX, что позволяют сократить код и добавить больше действий на страницу. Вы изучите: hx-push-url, hx-boost, hx-headers и hx-params.

Видеоурок

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

Управление историей браузера

Атрибут hx-push-url позволяет изменять адрес в браузере (URL) при успешной загрузке контента. Это полезно, если вы хотите сохранить возможность навигации через кнопку «Назад» или обновление страницы без потери состояния.

<a hx-get="/about" hx-target="#content" hx-push-url="true"> О нас </a>

В этом примере после загрузки страницы "О нас" изменится URL на /about, даже если не было полной перезагрузки страницы.

Подмена полной страницы

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

<body hx-boost="true"> 
	<a href="/catalog">Каталог</a>
</body>

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

Отправка дополнительных заголовков

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

<button hx-post="/submit" hx-headers='{"X-CSRFToken": "abc123"}'> Отправить </button>

Сервер получит заголовок X-CSRFToken со значением abc123.

Контроль передаваемых параметров

HTMX по умолчанию отправляет значения всех полей формы. hx-params позволяет ограничить или исключить некоторые из них из запроса.

<form hx-post="/save" hx-params="email">
	<input type="text" name="email">
	<input type="text" name="name">
	<button type="submit">Сохранить</button> 
</form>

В этом случае на сервер будет отправлено только поле email, а name проигнорируется. Можно также указать hx-params="not name" — исключить поле name.

Материалы для курса

htmx-attrs.zip

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

HTML5

Flask