JavaScript - Demo für die Anwendung der Fetch-API
Hier wird der Inhalt eines Formulars per JavaScript: Fetch-API an ein PHP-Skript gesendet.
Übertragungsmethode: POST
Quelltext: post.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
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
<?php
/*
* POST-Demo für die Anwendung der Fetch-API
*/
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Jeden einzelnen POST-Parameter mit echo ausgeben:
foreach ($_POST as $key => $value) {
echo '<p>' . $key . ': ' . htmlspecialchars($value) . '</p>';
}
// Die Anweisung: exit; nicht vergessen, ansonsten
// wird die komplette Datei geladen!
exit;
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>POST-Demo für die Anwendung der Fetch-API</title>
<style>
div#ausgabe {
color: royalblue;
}
</style>
</head>
<body>
<form id="form">
<p>
<label>Param 1: <input type="text" name="param1" value="some-param"></label>
</p>
<p>
<label>Param 2: <input type="text" name="param2" value="some-other-param"></label>
</p>
<p>
<label>Number Param: <input type="number" name="numparam" value="1.24"></label>
</p>
<p>
<button type="submit" id="submit">Absenden</button>
</p>
</form>
<span id="ausgabe"></span>
<script>
// Eventlistener für das Absenden des Formulars registrieren:
document.getElementById("submit").addEventListener("click", (e) => {
// Um zu verhindern, dass die Seite mit dem PHP-Skript,
// direkt aufgerufen wird unterdrücken wir die Standard-Aktion:
e.preventDefault();
// Die gleiche Datei (document.URL) aufrufen:
fetch(document.URL, {
// Übertragungsmethode: POST
method: "POST",
// Die Daten des Formulars werden im body übertragen:
body: new FormData(document.getElementById("form"))
}).then(antwort => {
// Die Antwort vom Server als Text auswerten:
return antwort.text();
}).then(antwort => {
// Antwort vom Server im HTML-Element eintragen:
document.getElementById("ausgabe").innerHTML = antwort;
});
});
</script>
</body>
</html>
Übertragungsmethode: GET
Quelltext: get.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
<?php
/*
* GET-Demo für die Anwendung der Fetch-API
*/
if (isset($_GET["senden"])) {
echo $_GET["senden"]; // Ausgabe: "Lorem"
// Die Anweisung: exit; nicht vergessen, ansonsten
// wird die komplette Datei geladen!
exit;
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>GET-Demo für die Anwendung der Fetch-API</title>
<style>
div#ausgabe {
color: royalblue;
}
</style>
</head>
<body>
<div id="ausgabe"></div>
<script>
// Die gleiche Datei (document.URL) aufrufen und GET-Parameter übergeben
fetch(document.URL + `?senden=Lorem`, {
// Übertragungsmethode: GET
method: "GET",
}).then(antwort => {
// Die Antwort vom Server als Text auswerten:
return antwort.text();
}).then(antwort => {
// Antwort vom Server im HTML-Element eintragen:
document.getElementById("ausgabe").innerHTML = antwort;
});
</script>
</body>
</html>
Tipps
Siehe dazu auch: Formulardaten über AJAX überprüfen und speichern - XMLHttpRequest
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
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<ins> Logische Auszeichnung
CSS - Blinkende Inhalte mit Keyframes
PHP - Datei ab einer gewissen Dateigröße automatisch mit Datum umbenennen