Penggunaan FormData dalam JavaScript

Katakan kita mempunyai sebuah borang:

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

Katakan kita ingin mendapatkan data borang ini dalam bentuk pasangan kunci-nilai. Sudah tentu, untuk itu kita perlu menjalankan gelung dan membentuk apa yang diinginkan di dalamnya. Dalam JavaScript, bagaimanapun, terdapat cara yang lebih mudah - kita boleh menggunakan objek khas FormData, yang membolehkan kita mendapatkan data borang secara teratur.

Mari kita bongkar cara bekerja dengan objek ini. Pertama, dapatkan rujukan kepada borang kita:

let form = document.querySelector('form');

Sekarang mari buat objek dengan borang kita:

let formData = new FormData(form);

Kita boleh memaparkan objek kita dalam konsol, namun dengan paparan sedemikian kita tidak akan melihat data borang:

console.log(formData);

Mari tukar objek kita kepada array untuk melihat data borang:

console.log(Array.from(formData));

Diberi sebuah borang dengan tiga input. Diberi juga sebuah butang. Apabila butang ditekan, dapatkan data borang dalam bentuk objek FormData.