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 AusblendenKopierenLinkZeilen

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 AusblendenKopierenLinkZeilen

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

JavaScript - HTML 5 - Pflichtfeld setzen mit JavaScript

MySQL - Spalte Gruppieren und zählen

Schlagwörter einfügen
Wenn Sie zum Beispiel eine Homepage über Pferde haben, verwenden Sie in Ihren Texten viele Schlagwörter, die mit dem Thema der Seite zu tun haben. Überlegen Sie nach welchen Suchbegriffen der Besucher mit der Suchmaschine sucht. (Namen von Pferderassen, Pferdebilder, Galopp, Springreiten, ...).
Dabei wird nach einfachen Schlagwörtern häufiger gesucht als nach speziellen Schlagwörtern.