การทำงานกับ FormData ใน JavaScript

สมมติว่าเรามีแบบฟอร์มบางอย่าง:

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

สมมติว่าเราต้องการรับข้อมูลของแบบฟอร์มนี้ ในรูปแบบ คีย์-ค่า แน่นอน, เพื่อการนี้เราจะต้องเรียกใช้ลูป และในนั้นสร้างสิ่งที่ต้องการ ใน JavaScript, อย่างไรก็ตาม มีวิธีที่ง่ายกว่า - สามารถ ใช้ออบเจ็กต์พิเศษ FormData, ซึ่งช่วยให้ได้รับข้อมูลแบบฟอร์ม ในรูปแบบที่เรียงลำดับ

ลองมาวิเคราะห์การทำงานกับออบเจ็กต์นี้กัน เริ่มต้นด้วยการรับลิงก์ไปยังแบบฟอร์มของเรา:

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

ตอนนี้สร้างออบเจ็กต์จากแบบฟอร์มของเรา:

let formData = new FormData(form);

สามารถแสดงออบเจ็กต์ของเราในคอนโซลได้ อย่างไรก็ตาม ด้วยการแสดงผลแบบนี้ เราจะไม่เห็นข้อมูลของแบบฟอร์ม:

console.log(formData);

แปลงออบเจ็กต์ของเราเป็นอาร์เรย์ เพื่อดู ข้อมูลของแบบฟอร์ม:

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

กำหนดแบบฟอร์มที่มีสามอินพุต กำหนดปุ่มด้วย เมื่อคลิกที่ปุ่ม ให้รับข้อมูลแบบฟอร์ม ในรูปแบบของออบเจ็กต์ FormData