Метод htmx.ajax()

Выдает AJAX-запрос в стиле htmx. Этот метод возвращает Promise, поэтому коллбек может быть выполнен после того, как контент будет вставлен в DOM.

Параметры

• verb — GET, POST и т. д.
• path — URL-адрес для выполнения AJAX-запроса
• element — целевой элемент (по умолчанию — body)

или

• verb — GET, POST и т. д.
• path — URL-адрес для выполнения AJAX-запроса
• selector — селектор целевого элемента

или

• verb — GET, POST и т. д.
• path — URL-адрес для выполнения AJAX-запроса
• context — объект контекста, который содержит любые из следующих параметров:
  • source — исходный элемент запроса; атрибуты hx-*, влияющие на запрос, будут применены к этому элементу и его предкам
  • event — событие, которое «вызвало» запрос
  • handler — коллбек, который будет обрабатывать HTML-ответ
  • target — целевой элемент, в который будет вставлен ответ
  • swap — как ответ будет вставлен относительно целевого элемента
  • values — значения для отправки с запросом
  • headers — заголовки для отправки с запросом
  • select — позволяет выбрать контент, который вы хотите вставить из ответа

Пример

// выполняем GET-запрос по адресу /example и помещаем HTML-ответ в #myDiv
htmx.ajax('GET', '/example', '#myDiv')

// выполняем GET-запрос по адресу /example и заменяем #myDiv на полученный ответ
htmx.ajax('GET', '/example', {target:'#myDiv', swap:'outerHTML'})

// выполняем код после того, как контент был вставлен в DOM
htmx.ajax('GET', '/example', '#myDiv').then(() => {
  // Этот код будет выполнен после события 'htmx:afterOnLoad'
  // и перед событием 'htmx:xhr:loadend'.
  console.log('Контент успешно добавлен!');
});