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

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

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

Відеоурок

Telegram group

Підписуйтесь на нашу групу в Телеграмі 🇺🇦

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.

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

Щоб завантажувати матеріали до відеокурсів, необхідно оформити підписку на сайт

Завдання до уроку

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

Велике завдання за курсом

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

Також варто подивитися

Верстка сайту на HTML5 та CSS3
8 уроків
Вёрстка адаптивного сайта на Bootstrap 4
6 уроків
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроків
Вивчення HTML для початківців з нуля!
18 уроків
Изучение препроцессора SASS / SCSS
7 уроків
Создание сайта с нуля | Полноценная верстка сайта
11 уроків
Коментарі
Додати коментар

Поки що коментарів немає