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

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

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

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

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

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

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

javascriptlet formData = new FormData(form);

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

javascriptconsole.log(formData);

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

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