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

Можно также отправлять формы методом POST, используя объекты класса FormData:

form.addEventListener('submit', 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 promise = fetch('/ajax/', { method: 'POST', body: formData, }); ... });

Преимущество FormData перед URLSearchParams в том, что FormData более мощный и предназначен специально для отправки форм (а URLSearchParams можно и просто использовать для формирования строки с GET параметрами, например, чтобы поменять адрес в адресной строке).

Удобство FormData проявляется, например, в том, что в конструктор класса можно просто передать ссылку на HTML форму, - и в этом случае поля формы соберутся автоматически и нам не нужно будет обращаться к каждому инпуту отдельно:

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

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

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

Итак, вот полный код клиентской части с использованием FormData:

<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 promise = fetch('/ajax/', { method: 'POST', body: new FormData(this), }); promise.then( response => { return response.text(); } ).then( text => { alert(text); } ); event.preventDefault(); });

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

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