Fetch Post: Как общаться с сервером без перезагрузки страницы

Fetch Post - это метод веб-запроса, при котором клиент отправляет данные на сервер для дальнейшей обработки. Это может быть отправка формы, добавление элемента в базу данных или обновление какого-либо объекта на сервере.

Для осуществления Fetch Post-запроса, необходимо использовать функцию fetch(), которая возвращает объект Promise и принимает в качестве аргументов адрес запроса (url) и настройки запроса (options). В качестве опций часто указывают метод запроса (POST, GET, PUT), тело запроса (body), заголовки (headers) и т.д.

Пример использования Fetch Post для отправки данных формы на сервер:

// Получаем форму по ее идентификатору
const form = document.getElementById('myForm');
// Обрабатываем отправку формы при помощи события submit
form.addEventListener('submit', (event) => {
  // Отменяем стандартное поведение при отправке формы
  event.preventDefault();
  // Получаем данные формы для отправки на сервер
  const formData = new FormData(form);
  // Опции запроса
  const options = {
    method: 'POST',
    body: formData
  };
  // Отправляем запрос и получаем ответ от сервера
  fetch('/api/data', options)
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => console.log(error));
});

В этом примере мы отправляем данные формы /api/data на сервер в формате FormData. После получения ответа от сервера мы преобразуем его в формат JSON и выводим в консоль.

В заключение, Fetch Post - это мощный инструмент для отправки запросов на сервер и получения данных в ответ. С помощью Fetch Post можно отправлять различные типы данных на сервер и получать различные типы ответов в зависимости от запроса.