Wysyłanie formularza przez AJAX za pomocą FormData JavaScript

Za pomocą FormData można automatycznie wysłać wszystkie pola formularza na serwer. Zobaczmy, jak to się robi.

Załóżmy, że mamy następujący formularz, w którym inputom nadano atrybuty name:

public/index.html<form action="" method="GET">
  <input name="num1">
  <input name="num2">
  <input type="submit">
</form>

Wyślijmy ten formularz przez AJAX. Na początek pobierzmy referencję do formularza do zmiennej:

public/client.jslet form = document.querySelector('form');

Teraz w ciele żądania jako dane wskażemy obiekt FormData. A samemu obiektowi jako parametr przekażemy referencję do formularza:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // przekazujemy referencję do formularza
  });
  
  event.preventDefault();
});

W rezultacie na serwerze będziemy mogli uzyskać wartości inputów po ich nazwach z atrybutów name:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'form data received';
  }
}