FormData-methoden voor inspectie en wijziging

Sam Thorogood

FormData is de beste vriend van de XHR-gebruiker en krijgt een upgrade in Chrome 50. We voegen methoden toe waarmee u uw FormData objecten kunt inspecteren of achteraf kunt wijzigen. U kunt nu get() , delete() en iteratiehulpmiddelen gebruiken, zoals entries , keys en meer. ( Bekijk de volledige lijst .)

Als u FormData nog niet gebruikt: het is een eenvoudige, goed ondersteunde API waarmee u programmatisch een virtueel formulier kunt bouwen en dit naar een verre plaats kunt sturen met behulp van window.fetch() of XMLHttpRequest.send(formData) .

Voor enkele voorbeelden, lees verder!

Parseer echte vormen als een professional

FormData kan worden opgebouwd uit een echt HTML-formulier, waarbij een momentopname wordt gemaakt van alle huidige waarden. Vroeger was het object echter volledig ondoorzichtig. Het enige wat je kon doen was het onveranderd doorsturen naar een server. Nu kun je het nemen, aanpassen, aanpassen, observeren, verkleinen, wijzigen en tenslotte uploaden:

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});
}

U kunt FormData ook verzenden via het oudere XMLHttpRequest :

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

Gooi uw FormData niet weg

Als u uw eigen FormData helemaal opnieuw aan het opbouwen bent, heeft u het misschien frustrerend gevonden dat u deze niet opnieuw kon gebruiken - u hebt veel tijd aan die velden besteed! Omdat zowel de methoden window.fetch() als XMLHttpRequest.send() een momentopname van de FormData maken, kunt u uw werk nu veilig hergebruiken en aanpassen! Bekijk dit voorbeeld:

// 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});