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
<!DOCTYPE html> <html lang="en"> <head> <head> <meta charset="UTF-8"> <meta name="author" content="Marcel Suter"/> <meta name="copyright" content="Marcel Suter - BZZ"/> <meta name="project" content="Simple Ajax"/> <meta name="description" content="AJAX JSON Datei"/> <title>Persondaten speichern</title> <script src="./savePerson.js"></script> </head> </head> <body> <h2>Person</h2> <form id="personForm"> <table> <tr> <td><label for="firstname">Vorname</label></td> <td><input id="firstname" type="text"/></td> </tr> <tr> <td><label for="lastname">Nachname</label></td> <td><input id="lastname" type="text"/></td> </tr> <tr> <td><label for="age">Alter</label></td> <td><input id="age" type="text"/></td> </tr> <tr> <td><label for="hobbies">Hobbys</label></td> <td><input id="hobbies" type="text"/></td> </tr> <tr> <td> <button type="submit">Speichern</button> </td> </tr> </table> </form> </body> </html>
Hinweise
- Die Eingabefelder müssen in einem
<form>…</form>-Element eingebettet sein. - Das Speichern erfolgt über den
<button type=“submit”>.
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
Marcel Suter