Отправка POST-данных в JavaScript без формы и обновления

Быстрый ответ

Для начала обратимся к использованию fetch:

fetch('your-endpoint', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({key: 'value'}) // Ваши данные для отправки
})
.then(res => res.json())
.then(data => console.log('Успешно:', data))
.catch(error => console.error('Ошибка:', error));

В этом примере показано, как отправить POST-запрос с передачей данных в формате JSON, а также как обработать ответ сервера или возникшую ошибку.

Надёжный XMLHttpRequest

Если fetch по каким-то причинам вам не подходит или возникают проблемы с поддержкой его браузерами, XMLHttpRequest всегда будет вам на помощь:

const xhr = new XMLHttpRequest();
xhr.open('POST', 'your-endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('Успешно:', JSON.parse(xhr.responseText));
  }
};
xhr.send(JSON.stringify({key: 'value'}));

Этот код позволит нам без проблем работать с JSON в POST-запросах и следить за изменением состояния запроса.

Продвинутые методы и особые ситуации

Искусство асинхронности

Использование fetch и XMLHttpRequest требует знания асинхронности в JavaScript. Владение техниками работы с callback-функциями, промисами или async/await является ключевым, ведь ответ сервера может прийти с задержкой относительно основной строки кода.

Подробнее об этом расскажет наш спикер на видео

Поддержка старых браузеров

Если ваша аудитория использует устаревшие браузеры, важно правильно инициализировать объект XMLHttpRequest, чтобы обеспечить широкую совместимость.

Внимание к ошибкам

Вам нужно быть готовым к сетевым ошибкам или сложностям при парсинге. Обработчик ошибок xhr.onerror для XMLHttpRequest и метод catch для fetch обеспечат надёжную защиту вашего кода.

Взаимодействие с сервером

Сервер должен быть грамотно настроен для приёма POST-запросов, иначе весь ваш труд окажется бесполезным. Готовьте серверную сторону для работы с вашим JavaScript-кодом.

Визуализация

Прикиньте отправку POST-запросов без использования формы, как кулинарный процесс:

Вы – повар, предпочитающий готовить изысканное блюдо (данные) и отправлять его напрямую клиенту (серверу), минуя поднос (форму).

Вы (Кулинар) – Готовим блюдо (Данные) – Загружаем в беспилотный корабль (объект XHR) – 🚀 Отправляем к клиенту (Серверу)

// Беспилотный корабль или объект XHR
const spaceship = new XMLHttpRequest();

// Приготовим эксклюзивное блюдо
const dish = JSON.stringify({ ingredient1: 'value1', ingredient2: 'value2' });

// Запускаем корабль
spaceship.open('POST', 'https://example.com/order', true);
spaceship.setRequestHeader('Content-Type', 'application/json');
spaceship.send(dish);  // И блюдо доставлено!

Наглядно представляем процесс доставки:

Повар --> 🍲 --> 🚁 --🚀--> 👤

Таким образом, сервер успешно получил ваше "блюдо", и вы обошлись без "подноса".

Кодирование данных: Элегантная упаковка

Бывает нужно разгрузить ваши данные не в повседневном "джинсовом" формате JSON, а в более официальном стиле application/x-www-form-urlencoded. Вот как это сделать:

const formData = new URLSearchParams();
formData.append('key', 'value');

fetch('your-endpoint', {
  method: 'POST',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  body: formData
})
.then(response => response.text())
.then(data => console.log('Успешно обработано:', data))
.catch(error => console.error('Ошибка обработки:', error));

Убедитесь, что сервер готов принять данные в таком "официальном наряде".

Отладка: Разрешаем задачи вместе с Шерлоком Холмсом

Превратитесь в детектива, исследуйте взаимодействие своих POST-запросов с помощью инструментов разработчика и журналирования в консоли. Анализируйте ответы сервера, изучайте содержимое и расшифровывайте сообщения об ошибках. Игра началась!