เมธอด FormData สำหรับการตรวจสอบและการแก้ไข

Sam Thorogood

FormData เป็นเครื่องมือที่ผู้ใช้ XHR ต้องมี และกำลังได้รับการอัปเกรดใน Chrome 50 เราจะเพิ่มวิธีการต่างๆ ที่ช่วยให้คุณตรวจสอบออบเจ็กต์ FormData หรือแก้ไขภายหลังได้ ตอนนี้คุณใช้ get(), delete() และตัวช่วยการทำซ้ำ เช่น entries, keys และอื่นๆ ได้แล้ว (ดูรายการทั้งหมด)

หากคุณยังไม่ได้ใช้ FormData โปรดทราบว่า FormData เป็น API ที่เรียบง่ายและได้รับการรองรับอย่างแพร่หลาย ซึ่งช่วยให้คุณสร้างแบบฟอร์มเสมือนแบบเป็นโปรแกรมและส่งไปยังที่ไกลๆ ได้โดยใช้ window.fetch() หรือ XMLHttpRequest.send(formData)

อ่านตัวอย่างได้ที่ด้านล่าง

แยกวิเคราะห์แบบฟอร์มจริงอย่างมือโปร

FormData สามารถสร้างจากแบบฟอร์ม HTML จริง โดยถ่ายภาพค่าปัจจุบันทั้งหมด แต่เดิมออบเจ็กต์นี้ทึบแสงทั้งหมด สิ่งที่ทำได้คือส่งต่อไปยังเซิร์ฟเวอร์โดยไม่มีการแก้ไข ตอนนี้คุณสามารถนำภาพไปใช้ แก้ไข ตัดต่อ สังเกต ย่อขนาด เปลี่ยนแปลง และสุดท้ายอัปโหลดได้

function sendRequest(theFormElement) {
    var formData = new FormData(theFormElement);
    formData.delete("secret_user_data"); // don't include this one!
    if (formData.has("include_favorite_color")) {
    formData.set("color", userPrefs.getColor());
    }
    // log all values like <input name="widget">
    console.info("User selected widgets", formData.getAll("widget"));

    window.fetch(url, {method: 'POST', body: formData});
}

นอกจากนี้ คุณยังส่ง FormData ผ่าน XMLHttpRequest เวอร์ชันเก่าได้ด้วย โดยทำดังนี้

var x = new XMLHttpRequest();
x.open('POST', url);
x.send(formData);

อย่าทิ้ง FormData

หากคุณสร้าง FormData ของคุณเองตั้งแต่ต้น คุณอาจรู้สึกหงุดหงิดที่ไม่สามารถนํากลับมาใช้ใหม่ได้ เนื่องจากคุณใช้เวลากับช่องเหล่านั้นไปมาก เนื่องจากทั้ง 2 วิธีของ window.fetch() และ XMLHttpRequest.send() จะจับภาพหน้าจอของ FormData คุณจึงใช้และแก้ไขงานซ้ำได้อย่างปลอดภัย ลองดูตัวอย่างนี้

// append allows multiple values for the same key
var formData = new FormData();
formData.append("article", "id-123");
formData.append("article", "id-42");

// send like request
formData.set("action", "like");
window.fetch(url, {method: 'POST', body: formData});

// send reshare request
formData.set("action", "reshare");  // overrides previous "action"
window.fetch(url, {method: 'POST', body: formData});