hx-config

Настраивает поведение запросов

Атрибут hx-config настраивает поведение запросов с помощью HCON или JSON.

Синтаксис

<button hx-post="/api/users" hx-config="timeout:5s">
  Create User
</button>

Или используйте JSON:

<button hx-post="/api/users" hx-config='{"timeout":5000}'>
  Create User
</button>

Доступные параметры

Параметр	Тип	Описание	Пример
`timeout`	number	Тайм-аут запроса в миллисекундах	5000
`credentials`	string	Режим учетных данных Fetch: «omit», «same-origin», «include"	"include”
`cache`	string	Режим кэширования Fetch: «default», «no-cache», «reload» и т. д.	”no-cache”
`redirect`	string	Режим перенаправления Fetch: «follow», «error», «manual"	"follow”
`referrer`	string	URL источника перехода или «no-referrer"	"no-referrer”
`integrity`	string	Значение целостности подресурса	”sha384-…”
`validate`	boolean	Нужно ли проверять форму перед отправкой	true

Эти параметры соответствуют Fetch API.

Примечание по безопасности: Параметр mode намеренно исключен из hx-config. Он всегда сбрасывается к глобальному значению htmx.config.mode (по умолчанию: "same-origin"), чтобы предотвратить атаки с внедрением, расширяющие область действия запросов. Чтобы изменить режим в разметке, задайте его глобально через htmx.config.mode или тег <meta name="htmx-config">. Подробнее см. в справочнике по настройке режима и рекомендациях по безопасности.

Наследование

Используйте :inherited, чтобы передать настройки потомкам:

<div hx-config:inherited="timeout:5s">
  <button hx-get="/data">Load</button>
</div>

Используйте :append, чтобы добавить настройки дочернего элемента:

<div hx-config:inherited="timeout:5s">
  <button hx-get="/data" hx-config:append="cache:no-cache">
    Load
  </button>
</div>

Кнопка использует и timeout:5s, и cache:no-cache.

Примеры

Задание тайм-аута для медленной конечной точки

<button hx-get="/slow-report"
        hx-config='{"timeout": 30000}'>
    Generate Report
</button>

Включение учетных данных

<button hx-get="/api/data"
        hx-config='{"credentials": "include"}'>
    Load Data
</button>

Отключение кэширования

<button hx-get="/live-data"
        hx-config='{"cache": "no-cache"}'>
    Get Live Data
</button>

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