Formulardaten über AJAX überprüfen und speichern
AJAX oder „Asynchronous Javascript and XML” ist keine Server-Plattform,
(auch kein Putzmittel 
) sondern vielmehr eine Ansammlung von Technologien für
anspruchsvolles Web 2.0 auf HTML-Oberflächen.
AJAX stellt eine Kombination aus bereits länger existierenden Technologien dar. JavaScript wird benutzt um im Browser des Benutzers eine Anfrage zum Server zu stellen. Wenn diese Anfrage vom Server bearbeitet wurde (z.B.: über PHP, ASP, CGI oder Perl), wird eine Funktion beim Benutzer ausgeführt. Die Nachrichten die der Server verschickt, sind hierbei oft in XML codiert. Die Codierung in XML ist jedoch nicht zwingend erforderlich, es kann auch eine Codierung als JSON oder als simpler Text erfolgen.
Demo
Funktionsweise
Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert. Die Formulardaten werden über JavaScript an das PHP-Script gesendet und dort überprüft. Bei einer fehlerhaften Eingabe werden Meldungen an das Formular zurück gegeben. Ansonsten können die Daten als E-Mail gesendet, in einer Datei oder Datenbank gespeichert werden.
An der Funktionsweise des Formulars, war mir eine klare Trennung von HTML, CSS, JavaScript und PHP wichtig. Eine ausführliche Beschreibung dazu, finden Sie in den folgenden Quelltexten.
Quelltext: Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Formulardaten über AJAX überprüfen und speichern</title>
<style>
body {
font-family: Arial, Sans-Serif;
background-color: Whitesmoke;
}
var {
color: Red;
}
</style>
<script>
// Das XMLHttpRequest-Objekt setzen
var xhr = new XMLHttpRequest();
// Diese Funktion beim laden der Seite starten
window.addEventListener("load", function() {
// Dem HTML-Button (name="senden") den Event-Handler: "click" zuweisen
// dieser ruft dann (beim klicken) die Funktion: eintragen() auf.
document.getElementsByName("senden")[0].addEventListener("click", eintragen);
});
function eintragen() {
// Die Formulardaten holen
var daten = new FormData(document.getElementsByTagName("form")[0]);
// Die Datei: "check.php" über dem HTTP-Stream öffnen
xhr.open("POST", "check.php", true);
// Die Formulardaten senden
xhr.send(daten);
// Auf eine Antwort warten
xhr.onreadystatechange = function() {
// Daten werden (vom PHP-Script) empfangen
if (xhr.readyState == 4 &&
xhr.status == 200) {
// Den Inhalt von 'responseText' überprüfen
if (xhr.responseText == "OK") {
// Eine Meldung ausgeben
document.getElementsByTagName("form")[0].innerHTML = "Die Daten wurden gesendet.";
}
else {
// Die Daten in einzelne Objekte zerlegen
var objekt = JSON.parse(xhr.responseText);
// Die HTML-Elemente (var) mit den Daten befüllen
document.getElementsByTagName("var")[0].innerHTML = objekt.name;
document.getElementsByTagName("var")[1].innerHTML = objekt.agb;
document.getElementsByTagName("var")[2].innerHTML = objekt.txt;
}
}
}
}
</script>
</head>
<body>
<form>
<p>
<label>Name: <var>*</var><br>
<input type="text" name="name"></label>
</p>
<p>
<label><input type="checkbox" name="agb"> AGB gelesen</label>
<var>*</var>
</p>
<p>
<label>Text: <var>*</var><br>
<textarea name="txt" rows="4" cols="25"></textarea></label>
</p>
<p>
<input type="button" name="senden" value="Absenden">
</p>
</form>
</body>
</html>
Daten empfangen
In der folgenden Datei ("check.php") werden die gesendeten Daten empfangen und überprüft.
Quelltext: check.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php
// Formulardaten über AJAX überprüfen und speichern
// Wurden Daten über 'POST' gesendet
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$fehleingabe = array(); // Dieses Array speichert die Fehleingaben
// Den Namen überprüfen
if ($_POST["name"] != "Werner") {
// Die Fehleingabe im Array speichern
$fehleingabe["name"] = "Der Name ist leider falsch!";
}
else {
// Die Fehleingabe leer lassen!
$fehleingabe["name"] = "";
}
// Die AGB (Checkbox) überprüfen
if (!isset($_POST["agb"])) {
$fehleingabe["agb"] = "Die AGB bitte bestätigen!";
}
else {
$fehleingabe["agb"] = "";
}
// Den Text (Textarea) überprüfen
if (strlen($_POST["txt"]) < 10) {
$fehleingabe["txt"] = "Text mit min. 10 Zeichen!";
}
else {
$fehleingabe["txt"] = "";
}
// Sind Fehleingaben vorhanden?
if (strlen(implode($fehleingabe)) > 0) {
// Ja
// Rückgabe an JavaScript
// Das Array mit: json_encode() serialisieren
echo json_encode($fehleingabe);
}
else {
// Nein
// Rückgabe an JavaScript
echo 'OK';
// Die Daten nun als E-Mail senden, in einer
// Datei oder Datenbank speichern.
}
}
?>
Es geht noch einfacher!
Möchte man das Formular und das PHP-Script in einer einzigen Datei zusammen fassen, so lässt sich dies auch realisieren.
Quelltext: Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<?php
// Formulardaten über AJAX überprüfen und speichern (Beispiel 2)
// Wurden Daten über 'POST' gesendet
if ($_SERVER["REQUEST_METHOD"] == "POST"):
// Dieses Array speichert die Fehleingaben
$Fehler = ["name"=>"", "agb"=>"", "txt"=>""];
// Fehleingaben überprüfen
$Fehler["name"] = $_POST["name"] != "Werner" ? 'Der Name ist leider falsch!' : '';
$Fehler["agb"] = !isset($_POST["agb"]) ? 'Die AGB bitte bestätigen!' : '';
$Fehler["txt"] = strlen($_POST["txt"]) < 10 ? 'Text mit min. 10 Zeichen!' : '';
// Sind Fehleingaben vorhanden?
if (strlen(implode($Fehler)) > 0):
// Ja
// Rückgabe an JavaScript
// Das Array mit: json_encode() serialisieren
echo json_encode($Fehler);
else:
// Nein
// Rückgabe an JavaScript
echo 'OK';
// Die Daten nun als E-Mail senden, in einer
// Datei oder Datenbank speichern.
endif;
exit; // Wichtig, ansonsten wird der HTML-Körper gesendet!
endif;
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Formulardaten über AJAX überprüfen und speichern</title>
<style>
body {
font-family: Arial, Sans-Serif;
background-color: Whitesmoke;
}
var {
color: Red;
}
</style>
<script>
// Das XMLHttpRequest-Objekt setzen
var xhr = new XMLHttpRequest();
// Diese Funktion beim laden der Seite starten
window.addEventListener("load", function() {
// Dem HTML-Button (name="senden") den Event-Handler: "click" zuweisen,
// dieser ruft dann (beim klicken) die Funktion: eintragen() auf.
document.getElementsByName("senden")[0].addEventListener("click", eintragen);
});
function eintragen() {
// Die Formulardaten holen
var daten = new FormData(document.getElementsByTagName("form")[0]);
// Die aktuelle Datei über dem HTTP-Stream öffnen
xhr.open("POST", document.URL, true);
// Die Formulardaten senden
xhr.send(daten);
// Auf eine Antwort warten
xhr.onreadystatechange = function() {
// Daten werden (vom PHP-Script) empfangen
if (xhr.readyState == 4 &&
xhr.status == 200) {
// Den Inhalt von 'responseText' überprüfen
if (xhr.responseText == "OK") {
// Eine Meldung ausgeben
document.getElementsByTagName("form")[0].innerHTML = 'Die Daten wurden gesendet.';
}
else {
// Die Daten in einzelne Objekte zerlegen
var objekt = JSON.parse(xhr.responseText);
// Die HTML-Elemente (var) mit den Daten befüllen
document.getElementsByTagName("var")[0].innerHTML = objekt.name;
document.getElementsByTagName("var")[1].innerHTML = objekt.agb;
document.getElementsByTagName("var")[2].innerHTML = objekt.txt;
}
}
}
}
</script>
</head>
<body>
<form>
<p>
<label>Name: <var>*</var><br>
<input type="text" name="name"></label>
</p>
<p>
<label><input type="checkbox" name="agb"> AGB gelesen</label>
<var>*</var>
</p>
<p>
<label>Text: <var>*</var><br>
<textarea name="txt" rows="4" cols="25"></textarea></label>
</p>
<p>
<input type="button" name="senden" value="Absenden">
</p>
</form>
</body>
</html>
Siehe auch: Demo für die Anwendung der Fetch-API
Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren - XMLHttpRequest
Auswahlliste als Filter in einer DB-Tabelle einsetzen - XMLHttpRequest
Suchanfrage an eine Datenbank über AJAX senden und empfangen - XMLHttpRequest / Fetch-API
Mit JSON Daten zwischen JavaScript und PHP austauschen - XMLHttpRequest