FormData-Methoden zur Prüfung und Änderung

Sam Thorogood

FormData ist der beste Freund von XHR-Nutzern und wird in Chrome 50 aktualisiert. Wir fügen Methoden hinzu, mit denen Sie Ihre FormData-Objekte prüfen oder nachträglich ändern können. Sie können jetzt get(), delete() und Iterationshilfen wie entries und keys verwenden. Hier findest du die vollständige Liste.

Wenn Sie FormData noch nicht verwenden, ist es eine einfache, gut unterstützte API, mit der Sie programmatisch ein virtuelles Formular erstellen und mit window.fetch() oder XMLHttpRequest.send(formData) an einen entfernten Ort senden können.

Einige Beispiele findest du weiter unten.

Echte Formulare wie ein Profi parsen

FormData kann aus einem echten HTML-Formular erstellt werden, wobei ein Snapshot aller aktuellen Werte erstellt wird. Früher war das Objekt jedoch vollständig undurchsichtig. Sie konnten sie nur unverändert an einen Server weiterleiten. Jetzt kannst du sie verwenden, ändern, verkleinern, vergrößern, beobachten, anpassen und schließlich hochladen:

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

Sie können FormData auch über die ältere XMLHttpRequest senden:

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

FormData nicht wegwerfen

Wenn Sie Ihre eigene FormData von Grund auf neu erstellen, ist es möglicherweise frustrierend, dass Sie sie nicht wiederverwenden können. Sie haben viel Zeit für diese Felder aufgewendet. Da sowohl die window.fetch()- als auch die XMLHttpRequest.send()-Methode einen Snapshot des FormData erstellt, können Sie Ihre Arbeit jetzt wiederverwenden und ändern. Sehen Sie sich dieses Beispiel an:

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