Penghantaran Borang melalui AJAX menggunakan FormData JavaScript

Dengan menggunakan FormData, anda boleh menghantar semua medan borang secara automatik ke pelayan. Mari kita lihat bagaimana ia dilakukan.

Katakan kita mempunyai borang berikut, di mana input diberikan atribut name:

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

Mari hantar borang ini melalui AJAX. Untuk permulaan, dapatkan pautan ke borang ke dalam pembolehubah:

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

Sekarang dalam badan permintaan sebagai data tetapkan objek FormData. Dan kepada objek itu sendiri, hantarkan pautan ke borang sebagai parameter:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // hantar pautan ke borang
  });
  
  event.preventDefault();
});

Hasilnya, di pelayan kita boleh mendapatkan nilai input mengikut nama mereka dari atribut name:

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