Отправка POST данных через fetch и FormData в JavaScript

В статье "Передача POST данных через fetch в JavaScript" был приведён пример кода для передачи данных методом POST, используя второй параметр функции fetch. В него передавался объект со свойствами method и body. Куда передаётся название метода и объект URLSearchParams.

Сейчас мы поговорим об URLSearchParams. А точнее о его более мощном заменителе - FormData. Фактически, если в нашем примере простейшей авторизации на сайте мы изменим URLSearchParams на FormData, то никаких ошибок не будет. То есть вполне можно поменять это:

var params = new URLSearchParams(); 
params.set('login', login);
params.set('pass', pass);

fetch('/login_ajax.php', {
   method: 'POST',
   body: params
});

На это:

var params = new FormData(); 
params.set('login', login);
params.set('pass', pass);

fetch('/login_ajax.php', {
   method: 'POST',
   body: params
});

Но удобство FormData состоит в том, что при создании объекта этого класса ему можно передавать указатель на форму. Тогда из формы автоматически будут прочитаны все поля и занесены в объект, который будет передан в fetch. То есть можно тегу form поставить id равный "form" <form id="form">, а потом передать эту информацию в класс FormData:

var form = document.getElementById('form');
// form указывает на форму

var params = new FormData(form); 

fetch('/login_ajax.php', {
   method: 'POST',
   body: params
});

Можно сделать код ещё короче, убрав промежуточные переменные params и form:

fetch('/login_ajax.php', {
   method: 'POST',
   body: new FormData( document.getElementById('form') )
});

При этом данные полей будут переданы как раньше. То есть в PHP массиве $_POST можно будет найти ключи "login" и "pass" со значениями из полей формы.