JavaScript - Demo für die Anwendung der Fetch-API
Hier wird der Inhalt eines Formulars per JavaScript: Fetch-API an ein PHP-Skript gesendet.
<?php
/*
* Demo für die Anwendung der Fetch-API
*/
error_reporting(E_ALL);
ini_set('display_errors', true);
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">
<meta name="viewport" content="width=device-width">
<title>Demo für die Anwendung der fetch-API</title>
</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="output"></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, {
method: "post",
// Die Daten des Formulars werden im body übertragen:
body: new FormData(document.getElementById("form"))
}).then(response => {
// Die Antwort vom Server als Text auswerten:
return response.text();
}).then(response => {
// Antwort vom Server im HTML-Element eintragen:
document.getElementById("output").innerHTML = response;
});
});
</script>
</body>
</html>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen HTML, CSS,
PHP, JavaScript und MySQL.
<textarea> Mehrzeiliger Eingabebereich
CSS - Die Schriftgröße je nach Fensterbreite automatisch anpassen
PHP - Prüfen ob ein Array leer ist
JavaScript - Zeilen, Wörter und Zeichen in einem Textarea zählen