Отправка 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-запросов с помощью инструментов разработчика и журналирования в консоли. Анализируйте ответы сервера, изучайте содержимое и расшифровывайте сообщения об ошибках. Игра началась!