FormData-methoden voor inspectie en wijziging

Sam Thorogood

FormData is de beste vriend van XHR-gebruikers en krijgt een upgrade in Chrome 50. We voegen methoden toe waarmee je je FormData objecten kunt inspecteren of achteraf kunt wijzigen. Je kunt nu get() en delete() gebruiken, evenals iteratiehulpprogramma's zoals entries , keys en meer. ( Bekijk de volledige lijst .)

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

Lees verder voor enkele voorbeelden!

Parseer echte vormen als een pro

FormData kan worden geconstrueerd op basis van een echt HTML-formulier, waarbij een momentopname wordt gemaakt van alle huidige waarden. Het object was voorheen echter volledig ondoorzichtig. Je kon het alleen ongewijzigd naar een server sturen. Nu kun je het kopiëren, aanpassen, bewerken, observeren, verkleinen, veranderen en uiteindelijk 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 de oudere XMLHttpRequest :

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

Gooi uw FormData niet weg

Als je je eigen FormData helemaal opnieuw opbouwt, vind je het misschien frustrerend dat je ze niet kunt hergebruiken - je hebt er al veel tijd aan besteed! Omdat zowel de window.fetch() als XMLHttpRequest.send() methode een momentopname van de FormData maakt, kun je je 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});