TGX формы и API — ajax-атрибуты, target/swap и токены

TGX формы и API#

Как стабильно отправлять формы через TGX и не получать 403 из-за request-token.

Синтаксис#

<form tgx:ajax-post="/api/v1/contact" tgx:target="#result" tgx:swap="#result:innerHTML">

Пример 1: минимум (копипаст для старта)#

<form tgx:ajax-post="/api/v1/contact" tgx:target="#result" tgx:swap="#result:innerHTML">

Пример 2: реальный сценарий#

<form tgx:ajax-post="/api/v1/auth/register" tgx:target="#register-result" tgx:swap="#register-result:innerHTML">
  <input type="email" name="email" required>
  <button type="submit">Создать приглашение</button>
</form>
<div id="register-result"></div>

Пример 3: комбинированный сценарий#

<form tgx:ajax-delete="/api/v1/domain" tgx:confirm="Удалить домен из каталога?" tgx:target="#domains-result">
  <input type="hidden" name="domain" value="example.com">
  <button type="submit">Удалить</button>
</form>

Разбор#

Для tokenized-форм отправляйте только разрешенные поля. Если действие destructive, добавляйте tgx:confirm, а ответ направляйте в отдельный контейнер через tgx:target.

Когда использовать#

Когда нужно управлять поведением блока прямо в шаблоне, не дублируя логику в нескольких местах.
Когда важно сделать поведение страницы предсказуемым для пользователя в реальных сценариях.

Частые ошибки#

Отправлять поля, которые не были включены в Tgx-Request-Token.fields
Не указывать target/swap и случайно перезаписывать неподходящий узел страницы

Проверка перед публикацией#

Проверены сценарии 403/422 и текст ошибок
В форме отправляются только разрешенные токеном поля

См. также#

Связанные статьи

tgx-ajax-post tgx-ajax-put tgx-ajax-patch tgx-ajax-delete tgx-target tgx-swap tgx-confirm

← Назад в FAQ