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

แซม โทโรกู๊ด

Twitter GitHub Glitch หน้าแรก

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

หากคุณยังไม่ได้ใช้ 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 ของตัวเองใหม่ตั้งแต่ต้น คุณอาจพบว่าน่าหงุดหงิดที่ไม่สามารถนำมาใช้ซ้ำได้ คุณใช้เวลามากมายไปกับช่องเหล่านั้น เนื่องจากทั้งวิธี 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});