Afsendelse af formular via AJAX ved hjælp af FormData JavaScript

Med FormData kan du automatisk sende alle formularfelter til serveren. Lad os se, hvordan det gøres.

Lad os sige, at vi har følgende formular, hvor inputfelterne har attributterne name:

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

Lad os sende denne formular via AJAX. Til at starte med, lad os hente en reference til formulareren i en variabel:

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

Nu skal vi i anmodningens krop angive et objekt af FormData som data. Og vi giver objektet en reference til formularen som parameter:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // sender reference til formularen
  });
  
  event.preventDefault();
});

Som et resultat kan vi på serveren få værdierne fra inputfelterne via deres navne fra name attributterne:

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