тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Отправка данных методом POST через URLSearchParams

Функция fetch имеет второй необязательный параметр, представляющий собой объект с настройками запроса:

let promise = fetch('/ajax/', { объект с настройками });

Например, с помощью настройки method можно указать HTTP метод запроса:

let promise = fetch('/ajax/', { method: 'метод запроса', });

Укажем, например, то, что запрос осуществляется методом GET (просто для примера, он и так по умолчанию GET):

let promise = fetch('/ajax/', { method: 'GET', });

А теперь укажем то, что запрос осуществляется методом POST:

let promise = fetch('/ajax/', { method: 'POST', });

Второй параметр функции fetch имеет достаточно много настроек, их мы разберем в следующих уроках. А пока давайте научимся отправлять данные на сервер методом POST.

Отправка форм методом POST

Итак, давайте научимся отправлять формы методом POST. Для этого следует использовать настройку body:

let promise = fetch('/ajax/', { method: 'POST', // указываем метод отправки body: 'данные', // здесь будут передаваемые данные });

В качестве данных могут выступать объекты класса URLSearchParams, либо объекты класса FormData.

Давайте, например, отправим данные с помощью URLSearchParams:

let searchParams = new URLSearchParams(); let promise = fetch('/ajax/', { method: 'POST', body: searchParams, });

Пока созданный нами объект класса URLSearchParams пустой и ничего полезного на сервер не передает. Давайте заполним его данными, передав строку с GET параметрами в конструктор класса:

form.addEventListener('submit', function(event) { let num1 = this.querySelector('[name="num1"]').value; let num2 = this.querySelector('[name="num2"]').value; let searchParams = new URLSearchParams('num1=' + num1 + '&num2=' + num2); let promise = fetch('/ajax/', { method: 'POST', body: searchParams, }); ... });

Можно добавлять данные и по-другому - используя метод set:

form.addEventListener('submit', function(event) { let num1 = this.querySelector('[name="num1"]').value; let num2 = this.querySelector('[name="num2"]').value; let searchParams = new URLSearchParams(); searchParams.set('num1', num1); searchParams.set('num2', num2); let promise = fetch('/ajax/', { method: 'POST', body: searchParams, }); ... });

Лично мне второй вариант нравится больше, так как не приходится формировать строку запроса.

Давайте сделаем полный клиентский код:

<form action="" method="GET" id="form"> <input type="text" name="num1"> <input type="text" name="num2"> <input type="submit"> </form> let form = document.getElementById('form'); form.addEventListener('submit', function(event) { let num1 = this.querySelector('[name="num1"]').value; let num2 = this.querySelector('[name="num2"]').value; let searchParams = new URLSearchParams(); searchParams.set('num1', num1); searchParams.set('num2', num2); let promise = fetch('/ajax/', { method: 'POST', body: searchParams, }); promise.then( response => { return response.text(); } ).then( text => { alert(text); // результат выведем алертом на экран } ); event.preventDefault(); });

Так как теперь AJAX запрос выполняется методом POST, то и в серверной части данные нужно будет получать не через $_GET, а через $_POST:

<?php echo $_POST['num1'] + $_POST['num2']; ?>

Изучите все возможности класса URLSearchParams по следующей ссылке.

На клиенте сделайте HTML форму для ввода трех чисел. Отправьте эту форму аяксом на сервер методом POST. Пусть сервер возвращает сумму переданных чисел. На клиенте после получения ответа сервера выведите этот ответ в каком-нибудь абзаце.