Formas nosūtīšana caur AJAX izmantojot FormData JavaScript

Ar FormData palīdzību var automātiski nosūtīt visus formas laukus uz serveri. Apskatīsim, kā tas tiek darīts.

Pieņemsim, ka mums ir šāda forma, kuras ievades laukiem ir doti atribūti name:

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

Nosūtīsim šo formu caur AJAX. Vispirms iegūstam saiti uz formu mainīgajā:

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

Tagad pieprasījuma pamatnā kā datus norādām objektu FormData. Un pašam objektam kā parametru padodam saiti uz formu:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // padodam saiti uz formu
  });
  
  event.preventDefault();
});

Rezultātā serverī mēs varēsim iegūt ievades lauku vērtības pēc to nosaukumiem no atribūtiem name:

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