Odosielanie formulára cez AJAX pomocou FormData v JavaScripte

Pomocou FormData môžeme automaticky odoslať všetky polia formulára na server. Pozrime sa, ako sa to robí.

Nech máme nasledujúci formulár, v ktorom majú vstupy atribúty name:

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

Pošlime tento formulár cez AJAX. Na začiatok získame odkaz na formulár do premennej:

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

Teraz v tele požiadavky ako údaje zadáme objekt FormData. A samotnému objektu ako parameter odovzdáme odkaz na formulár:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // odovzdáme odkaz na formulár
  });
  
  event.preventDefault();
});

V dôsledku toho na serveri budeme môcť získať hodnoty vstupov podľa ich mien z atribútov name:

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