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

В данном уроке мы научимся передавать данные методом POST с помощью класса URLSearchParams.

Давайте посмотрим, как это делается. Для начала создадим объект этого класса:

script.jslet searchParams = new URLSearchParams();

Теперь добавим параметры с помощью метода set:

script.jssearchParams.set('num1', '1');
searchParams.set('num2', '2');

Теперь присвоим наш объект в настройку с телом запроса:

script.jslet response = await fetch('/ajax.php', {
  method: 'POST',
  body: searchParams,
});

Давайте соберем все вместе и сделаем отправку AJAX запроса по клику на кнопку:

script.jsbutton.addEventListener('click', async function() {
  let searchParams = new URLSearchParams();
  
  searchParams.set('num1', '1');
  searchParams.set('num2', '2');
  
  let response = await fetch('/ajax.php', {
    method: 'POST',
    body: searchParams,
  });
});

После отправки запроса имена, которые мы задавали с помощью метода set, станут именами ключей в массиве $_POST на стороне сервера:

ajax.php<?php
  echo $_POST['num1']; // 1
  echo $_POST['num2']; // 2
?>
Задание 1

Дана форма с тремя инпутами. В инпуты вводятся числа. Отправьте эту форму через AJAX на сервер. Пусть сервер результатом вернет сумму чисел.