====== LU04c - Formulardaten verarbeiten ======
Beim Speichern von Benutzereingaben muss der View-Controller die Formulardaten an den entsprechenden Service senden.
Dazu müssen wir beim ''fetch''-Befehl ein paar zusätzliche Parameter mitgeben.
==== Beispiel ====
=== person.html ===
Persondaten speichern
Person
== Hinweise ==
* Die Eingabefelder müssen in einem ''''-Element eingebettet sein.
* Das Speichern erfolgt über den ''''.
=== savePerson.js ===
document.addEventListener("DOMContentLoaded", () => {
// Listener for submit-event
document.getElementById("personForm").addEventListener("submit", savePerson);
});
function savePerson(event) {
// Don't let the browser send any request
event.preventDefault();
// get the form-element
const personForm = document.getElementById("personForm");
// create a FormData-object and add the data
const formData = new FormData(personForm);
// create an URLSearchParam-object and add the formData
const data = new URLSearchParams(formData);
fetch ("./save",
{
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: data
})
.then(function (response) {
if (!response.ok) {
console.log(response);
} else return response;
})
.then()
.catch(function (error) {
console.log(error);
});
}
=== Hinweise ===
* Der Browser möchte beim "Submit"-Event selber einen Request absetzen. Dies müssen wir über ''event.preventDefault()'' verhindern.
* Im ''fetch''-Befehl müssen wir zusätzlich zur URL einige Parameter angeben:
* ''method'': Die HTTP-Methode für den Request (Default: GET)
* ''headers'': Hier geben wir an, wie die Daten codiert werden.
* ''body'': Die Formulardaten
----
{{tag>M321-LU04}}
[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Marcel Suter