FormData-Methoden zur Prüfung und Änderung

Thorogood

FormData ist der beste Freund des XHR-Nutzers und erhält in Chrome 50 ein Upgrade. Wir fügen Methoden hinzu, mit denen Sie Ihre FormData-Objekte überprüfen oder nachträglich ändern können. Sie können jetzt get(), delete() und Iterationshilfen wie entries, keys und andere verwenden. (Vollständige Liste ansehen)

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

Lesen Sie weiter, um ein paar Beispiele zu erhalten.

Echte Formulare parsen wie ein Profi

FormData kann aus einem echten HTML-Formular erstellt werden, das einen Snapshot aller aktuellen Werte aufnimmt. Früher war das Objekt jedoch völlig undurchsichtig. Sie konnten sie lediglich unverändert an einen Server senden. Jetzt können Sie es nehmen, ändern, es verändern, beobachten, verkleinern, ändern 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});
}

Du kannst FormData auch über die ältere XMLHttpRequest senden:

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

FormData-Daten nicht verwerfen

Wenn du deine eigene FormData von Grund auf neu erstellst, hat es dich möglicherweise frustriert, dass du sie nicht wiederverwenden kannst – du hast viel Zeit mit diesen Feldern verbracht. Da sowohl mit der Methode window.fetch() als auch mit der Methode XMLHttpRequest.send() ein Snapshot der FormData erstellt wird, können Sie Ihre Arbeit bedenkenlos 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});