Метод POST через FormData в AJAX в PHP

Давайте теперь будем передавать данные методом POST с помощью класса FormData. Для начала давайте напишем базовый пример отправки формы. Будем добавлять данные через метод set:

script.jsform.addEventListener('submit', async function(event) {
  let num1 = this.querySelector('[name="num1"]').value;
  let num2 = this.querySelector('[name="num2"]').value;
  
  let formData = new FormData();
  formData.set('num1', num1);
  formData.set('num2', num2);
  
  let response = await fetch('/ajax.php', {
    method: 'POST',
    body: formData,
  });
  
  event.preventDefault();
});

Класс FormData позволяет упростить приведенный выше код в том случае, когда мы хотим отправить на сервер все поля формы. В этом случае можно передать ссылку на форму в конструктор класса FormData. В результате значения всех полей формы будут получены автоматически:

script.jsform.addEventListener('submit', async function(event) {
  let formData = new FormData(this); // this указывает на форму
  
  let response = await fetch('/ajax.php', {
    method: 'POST',
    body: formData,
  });
  
  event.preventDefault();
});

Можно переписать код еще компактнее:

script.jsform.addEventListener('submit', async function(event) {
  let response = await fetch('/ajax.php', {
    method: 'POST',
    body: new FormData(this), // сразу передадим объект в body
  });
  
  event.preventDefault();
});