Formular über AJAX erstellen und Daten versenden
Ohne lästigen Seitenwechsel wird das folgende Formular geladen und gesendet. Es wird über JavaScript eine Anfrage an ein PHP-Script gesendet, dieses erzeugt dann das Formular das dann wiederum mit JavaScript ausgegeben wird.
Demo
Der Quelltext ist ohne weitere Erklärung, habe auf meiner Website genug Beispiele (siehe Tipps) wo alles genau kommentiert wurde.
Quelltext: index.htm 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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Formular über AJAX erstellen und Daten versenden</title>
<style>
body {
font-family: Verdana, Arial, Sans-Serif;
background-color: #F5F5F5;
}
form#form {
background-color: #DDDDDD;
padding: 5px;
}
</style>
<script>
const XHR = new XMLHttpRequest();
function zeigeFormular() {
// Mit GET eine Anfrage senden
XHR.open("GET", "antwort.php" +
"?zeigeFormular", true);
XHR.send(null);
XHR.onreadystatechange = function () {
if (XHR.readyState == 4 &&
XHR.status == 200) {
document.getElementById("ausgabe").innerHTML = XHR.responseText;
}
}
}
function sendeFormular() {
// Mit POST das Formular senden
XHR.open("POST", "antwort.php", true);
let daten = new FormData(document.getElementById("form"));
XHR.send(daten);
XHR.onreadystatechange = function () {
if (XHR.readyState == 4 &&
XHR.status == 200) {
document.getElementById("ausgabe").innerHTML = XHR.responseText;
}
}
}
</script>
</head>
<body>
<p><button type="button" onClick="zeigeFormular()">Formular anzeigen</button></p>
<div id="ausgabe"></div>
</body>
</html>
Das HTML-Formular könnte man auch per JavaScript erzeugen aber so hat man die Möglichkeit über PHP bestimmte Werte (zum Beispiel einen CSRF-Token) mit zu geben.
Quelltext: antwort.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
<?php
// Datei: antwort.php
// Formular anzeigen
if (isset($_GET["zeigeFormular"])) {
echo '<form id="form" method="post">
<label>Name: <input type="text" name="name"></label>
<button type="button" onClick="sendeFormular()">Formular senden</button>
</form>';
}
// Formular wurde abgesendet
if (isset($_POST["name"])) {
if (!empty($_POST["name"])) {
echo '<p>Dein Name ist: ' . htmlspecialchars($_POST["name"]) . '</p>';
}
else {
echo '<p>Es wurde nichts eingetragen!</p>';
}
}
?>
Tipps
Siehe auch: Demo für die Anwendung der Fetch-API
Formulardaten über AJAX überprüfen und speichern
Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren
Auswahlliste als Filter in einer DB-Tabelle einsetzen
Suchanfrage an eine Datenbank über AJAX senden und empfangen