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.

<dt> Definitionsliste

CSS - Hintergrundbild mit Zoom Funktion

PHP - Formulareingaben überprüfen und Fehlermeldungen ausgeben

JavaScript - Löschen mit Sicherheitsabfrage

MySQL - Alle Einträge ab einem bestimmten Datum ausgeben