htmx.ajax()

Синтаксис

htmx.ajax(method, url)
htmx.ajax(method, url, target)
htmx.ajax(method, url, options)

Передайте селектор или элемент в качестве целевого объекта:

await htmx.ajax('GET', '/messages', '#messages')

await htmx.ajax(
  'GET',
  '/messages',
  document.querySelector('#messages')
)

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

await htmx.ajax('POST', '/messages', {
  target: '#messages',
  swap: 'beforeend',
  values: {
    body: 'Hello'
  }
})

Параметры

method

Метод HTTP. Названия методов не чувствительны к регистру.

await htmx.ajax('GET', '/messages')
await htmx.ajax('post', '/messages')
await htmx.ajax('DELETE', '/messages/42')

url

URL запроса.

await htmx.ajax('GET', '/messages?limit=10')

target

Передайте селектор или элемент третьим аргументом.

await htmx.ajax('GET', '/messages', '#messages')

Если целевой селектор не соответствует элементам, возвращённый промис будет отклонён.

options

Для более точной настройки используйте объект параметров. Он принимает поля контекста запроса:

await htmx.ajax('POST', '/messages', {
  source: '#new-message',
  target: '#messages',
  swap: 'beforeend',
  values: {
    body: 'Hello'
  },
  headers: {
    'X-Requested-By': 'compose-form'
  }
})

Поддерживаются следующие поля:

Если источник и цель не указаны, htmx использует document.body.

Указание источника

Укажите source, если запрос должен выполняться так, как если бы он исходил от элемента:

await htmx.ajax('POST', '/messages', {
  source: '#new-message',
  target: '#messages',
  swap: 'beforeend'
})

Источник предоставляет унаследованные атрибуты htmx, значения формы и элемент, используемый для событий жизненного цикла. Если селектор источника не соответствует элементам, возвращённый промис будет отклонён.

Если target не указан, источником становится целевой объект по умолчанию.

Настройка замены содержимого

Передайте сериализованное значение hx-swap с помощью swap:

await htmx.ajax('GET', '/messages', {
  target: '#messages',
  swap: 'innerHTML transition:true'
})

Выберите часть ответа с помощью select:

await htmx.ajax('GET', '/messages', {
  target: '#messages',
  swap: 'innerHTML',
  select: '#unread'
})

Используйте selectOOB для вставки содержимого вне основного целевого элемента.

Передача значений

Передайте значения запроса с помощью values:

await htmx.ajax('POST', '/messages', {
  values: {
    body: 'Hello',
    draft: false
  }
})

Для GET и DELETE htmx добавляет значения в строку запроса URL. Для остальных методов значения передаются в теле запроса.

Значения исходной формы добавляются автоматически:

await htmx.ajax('POST', '/messages', {
  source: '#new-message'
})

Явно указанные значения заменяют значения формы с такими же именами.

Указание заголовков

Передайте заголовки запроса с помощью headers:

await htmx.ajax('GET', '/messages', {
  headers: {
    'X-Request-Source': 'inbox'
  }
})

Передача события

Передавайте событие, вызвавшее запрос, если вызываете htmx.ajax() из обработчика событий:

button.addEventListener('click', event => {
  htmx.ajax('POST', '/messages', {
    source: button,
    event
  })
})

Возвращаемое значение

htmx.ajax() возвращает Promise, который разрешается после завершения запроса.

await htmx.ajax('GET', '/messages', '#messages')
console.log('Request complete')

См. также

• htmx.swap()
• hx-swap
• hx-target
• hx-select