Логотип Tagix
Изображение Изображение

← Назад

tgx:ajax-post#

AJAX POST-шорткат.

Синтаксис#

<form tgx:ajax-post="/api/v1/contact"></form>

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

<form tgx:ajax-post="/api/v1/contact"></form>

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

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

Разбор#

Используйте для отправки форм и create-операций.

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

  • Когда нужно обновлять часть страницы без полной перезагрузки (формы, фильтры, списки, таблицы).
  • Когда нужно контролировать UX запроса: куда вставить ответ, по какому событию отправить и как обработать подтверждение.

Поведение в runtime#

  • Тип: пользовательская директива.
  • В sandbox директива tgx:ajax-post: запрещена.
  • Это HTMX-мост: runtime маппит tgx: в соответствующие data-hx- атрибуты.

Параметры#

Обязательные#

Необязательные#

По умолчанию#

  • Метод запроса определяется самой директивой.

Типы#

  • URL/путь: строка.

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

  • Убедитесь, что endpoint существует в /api/v1/* и ожидает именно этот HTTP метод.
  • Для форм внутри админки всегда передавайте разрешенные токеном поля, иначе получите 403.

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

  • Пример корректно отрабатывает в рабочем шаблоне/тестовой странице проекта.
  • Значения по умолчанию обработаны (|fallback) там, где данные могут отсутствовать.
  • Целевой блок ответа задан через tgx:target/tgx:swap и корректно обновляется.
  • Проверен сценарий ошибки API (429/403/422), чтобы UI не оставался в неконсистентном состоянии.

См. также#