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