Übersichtliche Datenübermittlung
FormData übermittelt Daten als Name-Werte-Paare an die Anwendung auf den Server – und zwar nicht nur Daten aus einem Formular.
<input type="text" name="item" id="item> <input type="text" name="price" id="price"> <input type="checkbox" name="chk" id="chk" checked> Mitmachen! <textarea name="tx" id="tx">Und etwas Text mit in die Übertragung</textarea> <button>Submit</button>
FormData append
- FormData() erstellt ein neues FormData-Objekt,
- FormData.append() hängt ein key-value-Paar an das FormData-Objekt an erstellt neue Schlüssel.
<script> document.querySelector("button").addEventListener ("click", function () { const data = new FormData(); data.append("item" , document.querySelector("#item").value); data.append("price" , document.querySelector("#price").value); data.append("data" , "Wird noch mit dazugepackt"); const xhr = new XMLHttpRequest(); xhr.open( 'post', 'formdata.php', true ); xhr.send(data); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { let response = JSON.parse(xhr.responseText); … out.innerHTML += "item " + response.item; out.innerHTML += "price " + response.price; … } } }); </script>
FormData.values und FormData.entries
FormData.values () gibt einen Iterator zurück, der über alle Werte des FormData-Objekts läuft.
let formData = new FormData(); formData.append('item', document.querySelector("#item").value); formData.append('price', document.querySelector("#price").value); for (let value of formData.values()) { console.log(value); }
FormData.entries () gibt Name und Wert zurück.
for (let value of formData.entries()) { console.log ("entries " + value[0] + " mit " + value[1]); }
Formulardaten in PHP übernehmen
In der Anwendung auf dem Server kommen die Daten »ganz normal« als $_POST-Array an. Wenn also Javascript im Browser nicht aktiv ist, haben wir ein normales HTML-Formular und eine normale PHP-Anwendung. Das Formular funktioniert auch ohne Javascript – wenn auch wahrscheinlich deutlich unbequemer für den Benutzer.
Der Vorteil gegenüber JSON: Die Daten auf der Serverseite sind nicht von einer normalen Datenübertragung zu unterscheiden. Nur der Wert von data, der ohne das klassische input type="hidden" an die Anwendung übertragen wird, käme in diesem Fall nicht bei der Anwendung an.
Javascript kann zwar Daten aus XML-Dateien lesen, aber kann Dateien nicht schreiben und speichern. Beispiel: PHP – Daten aus Formdata in XML übernehmen – Sparversion.
<?php $xml = new DomDocument("1.0", "UTF-8" ); $xml->FormatOutput = true; $insale = $_POST["item"]; $inprice = $_POST["price"]; if (file_exists('formdata.xml')) { $xml->load("formdata.xml"); $root = $xml->getElementsByTagName("root")->item(0); } else { $root = $xml->createElement("root"); $root = $xml->appendChild($root); } $sale = $xml->createElement("sale"); $sale = $root->appendChild($sale); $item = $xml->createElement("item",$insale); $item = $sale->appendChild($item); $price = $xml->createElement("price",$inprice); $price = $sale->appendChild($price); $string_value = $xml->saveXML(); $xml->save("formdata.xml");
Browser-Support
Die grundlegenden Funktionen FormData mit FormData.append werden von allen modernen Browsern unterstützt, IE ab Version 10.