FormData-Methoden zur Prüfung und Änderung

Sam Thorogood

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

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

Hier sind einige Beispiele:

Echte Formulare professionell analysieren

FormData kann aus einem echten HTML-Formular erstellt werden, indem ein Snapshot aller aktuellen Werte aufgenommen wird. Das Objekt war jedoch früher vollständig undurchsichtig. Sie konnten die Daten nur unverändert an einen Server senden. Jetzt kannst du es aufnehmen, bearbeiten, 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});
}

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

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

FormData nicht verwerfen

Wenn Sie Ihre eigene FormData von Grund auf erstellen, ist es vielleicht frustrierend, dass Sie sie nicht wiederverwenden können. Sie haben schließlich viel Zeit in diese Felder investiert. Da sowohl die Methode window.fetch() als auch die Methode XMLHttpRequest.send() einen Snapshot von FormData erstellen, können Sie Ihre Arbeit jetzt sicher wiederverwenden und ändern. Hier ein Beispiel:

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