Αποστολή φόρμας μέσω AJAX χρησιμοποιώντας FormData JavaScript

Με το FormData μπορούμε να στείλουμε αυτόματα όλα τα πεδία της φόρμας στον διακομιστή. Ας δούμε πώς γίνεται αυτό.

Ας υποθέσουμε ότι έχουμε την ακόλουθη φόρμα, στην οποία τα inputs έχουν τα χαρακτηριστικά name:

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

Ας στείλουμε αυτή τη φόρμα μέσω AJAX. Για αρχή, ας πάρουμε έναν σύνδεσμο προς τη φόρμα σε μια μεταβλητή:

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

Τώρα στο σώμα του αιτήματος ως δεδομένα θα ορίσουμε το αντικείμενο FormData. Και στον ίδιο το αντικείμενο ως παράμετρο θα περάσουμε τον σύνδεσμο προς τη φόρμα:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // περνάμε τον σύνδεσμο προς τη φόρμα
  });
  
  event.preventDefault();
});

Ως αποτέλεσμα, στο διακομιστή θα μπορούμε να λάβουμε τις τιμές των inputs από τα ονόματά τους από τα χαρακτηριστικά name:

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