Атрибут hx-vals

Атрибут hx-vals позволяет вам добавлять параметры, которые будут отправлены с AJAX-запросом.

По умолчанию значение этого атрибута представляет собой список значений имя-выражение в формате JSON (JavaScript Object Notation).

Если вы хотите, чтобы hx-vals вычислял указанные значения, вы можете префиксировать значения с помощью javascript: или js:.

<div hx-get="/example" hx-vals='{"myVal": "My Value"}'>
  Получить некоторый HTML, включая значение в запрос
</div>

<div hx-get="/example" hx-vals='js:{myVal: calculateValue()}'>
  Получить некоторый HTML, включая динамическое значение из JavaScript в запрос
</div>

При использовании вычисляемого кода вы можете получить доступ к объекту event. Этот пример включает значение последней нажатой клавиши в поле ввода.

<div hx-get="/example" hx-trigger="keyup" hx-vals='js:{lastKey: event.key}'>
  <input type="text" />
</div>

Вы также можете использовать оператор распространения (spread operator) для динамического указания значений. Это позволяет вам включать все свойства из объекта, возвращаемого функцией:

<div hx-get="/example" hx-vals='js:{...foo()}'>
  Получить некоторый HTML, включая все значения из foo() в запрос
</div>

В этом примере, если foo() возвращает объект, такой как {name: "John", age: 30}, оба параметра name и age будут включены в запрос.

Вопросы безопасности

По умолчанию значение hx-vals должно быть действительным JSON. Оно не вычисляется динамически. Если вы используете префикс javascript:, имейте в виду, что вы создаёте вопросы безопасности, особенно при работе с пользовательским вводом, таким как строки запроса или контент, созданный пользователями, что может привести к уязвимости межсайтового скриптинга (XSS).

Примечания

hx-vals наследуется и может быть размещён на родительском элементе.
Объявление переменной в дочернем элементе переопределяет объявление в родительском элементе.
Значения ввода с одинаковым именем будут переопределены объявлениями переменных.