Trimiterea formularului prin AJAX folosind FormData JavaScript

Cu ajutorul FormData puteți trimite automat toate câmpurile formularului către server. Să vedem cum se face acest lucru.

Să presupunem că avem următorul formular, în care input-urile au atributul name:

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

Să trimitem acest formular prin AJAX. Pentru început, să obținem o referință la formular într-o variabilă:

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

Acum, în corpul cererii, ca date specificăm obiectul FormData. Și obiectului îi transmitem ca parametru referința la formular:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // transmitem referința la formular
  });
  
  event.preventDefault();
});

Ca rezultat, pe server vom putea obține valorile input-urilor după numele lor din atributele name:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'datele formularului au fost primite';
  }
}