Formulardaten über AJAX überprüfen und speichern

AJAX oder „Asynchronous Javascript and XML” ist keine Server-Plattform, (auch kein Putzmittel ) sondern vielmehr eine Ansammlung von Technologien für anspruchsvolles Web 2.0 auf HTML-Oberflächen.

AJAX stellt eine Kombination aus bereits länger existierenden Technologien dar. JavaScript wird benutzt um im Browser des Benutzers eine Anfrage zum Server zu stellen. Wenn diese Anfrage vom Server bearbeitet wurde (z.B.: über PHP, ASP, CGI oder Perl), wird eine Funktion beim Benutzer ausgeführt. Die Nachrichten die der Server verschickt, sind hierbei oft in XML codiert. Die Codierung in XML ist jedoch nicht zwingend erforderlich, es kann auch eine Codierung als JSON oder als simpler Text erfolgen.

Anwendungsdemo

Funktionsweise

Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert. Die Formulardaten werden über JavaScript an das PHP-Script gesendet und dort überprüft. Bei einer fehlerhaften Eingabe werden Meldungen an das Formular zurück gegeben. Ansonsten können die Daten als E-Mail gesendet, in einer Datei oder Datenbank gespeichert werden.

An der Funktionsweise des Formulars, war mir eine klare Trennung von HTML, CSS, JavaScript und PHP wichtig. Eine ausführliche Beschreibung dazu, finden Sie in den folgenden Quelltexten.

QuelltextKopierenAusblendenZeilen

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Formulardaten über AJAX überprüfen und speichern</title>

  <style>
  body {
   font-family: Arial, Sans-Serif;
   background-color: Whitesmoke;
  }

  var {
   color: Red;
  }
  </style>


  <script>
  // Das XMLHttpRequest-Objekt setzen
  var xhr = new XMLHttpRequest();

  // Diese Funktion beim laden der Seite starten
  window.addEventListener("load", function() {

   // Dem HTML-Button (name="senden") den Event-Handler: "click" zuweisen
   // dieser ruft dann (beim klicken) die Funktion: eintragen() auf.
   document.getElementsByName("senden")[0].addEventListener("click", eintragen);
  });

  function eintragen() {
   // Die Formulardaten holen
   var daten = new FormData(document.getElementsByTagName("form")[0]);

   // Die Datei: "check.php" über dem HTTP-Stream öffnen
   xhr.open("POST", "check.php", true);

   // Die Formulardaten senden
   xhr.send(daten);

   // Auf eine Antwort warten
   xhr.onreadystatechange = function() {

    // Daten werden (vom PHP-Script) empfangen
    if (xhr.readyState == 4 &&
        xhr.status == 200) {

     // Den Inhalt von 'responseText' überprüfen
     if (xhr.responseText == "OK") {

      // Eine Meldung ausgeben
      document.getElementsByTagName("form")[0].innerHTML = "Die Daten wurden gesendet.";
     }
     else {

      // Die Daten in einzelne Objekte zerlegen
      var objekt = JSON.parse(xhr.responseText);

      // Die HTML-Elemente (var) mit den Daten befüllen
      document.getElementsByTagName("var")[0].innerHTML = objekt.name;
      document.getElementsByTagName("var")[1].innerHTML = objekt.agb;
      document.getElementsByTagName("var")[2].innerHTML = objekt.txt;
     }
    }
   }
  }
  </script>


 </head>
<body>

<form>

 <p>
  <label>Name: <var>*</var><br>
  <input type="text" name="name"></label>
 </p>

 <p>
  <label><input type="checkbox" name="agb"> AGB gelesen</label>
  <var>*</var>
 </p>

 <p>
  <label>Text: <var>*</var><br>
  <textarea name="txt" rows="4" cols="25"></textarea></label>
 </p>

 <p>
  <input type="button" name="senden" value="Absenden">
 </p>

</form>

</body>
</html>

Daten empfangen

In der folgenden Datei ("check.php") werden die gesendeten Daten empfangen und überprüft.

Quelltext „check.phpKopierenAusblendenZeilen

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
<?php
// Formulardaten über AJAX überprüfen und speichern

// Wurden Daten über 'POST' gesendet
if ($_SERVER["REQUEST_METHOD"] == "POST") {

 
$fehleingabe = array(); // Dieses Array speichert die Fehleingaben

 // Den Namen überprüfen
 
if ($_POST["name"] != "Werner") {

  
// Die Fehleingabe im Array speichern
  
$fehleingabe["name"] = "Der Name ist leider falsch!";
 }
 else {

  
// Die Fehleingabe leer lassen!
  
$fehleingabe["name"] = "";
 }

 
// Die AGB (Checkbox) überprüfen
 
if (!isset($_POST["agb"])) {
  
$fehleingabe["agb"] = "Die AGB bitte bestätigen!";
 }
 else {
  
$fehleingabe["agb"] = "";
 }

 
// Den Text (Textarea) überprüfen
 
if (strlen($_POST["txt"]) < 10) {
  
$fehleingabe["txt"] = "Text mit min. 10 Zeichen!";
 }
 else {
  
$fehleingabe["txt"] = "";
 }

 
// Sind Fehleingaben vorhanden?
 
if (strlen(implode($fehleingabe)) > 0) {

  
// Ja
  // Rückgabe an JavaScript
  // Das Array mit: json_encode() serialisieren
  
echo json_encode($fehleingabe);
 }
 else {

  
// Nein
  // Rückgabe an JavaScript
  
echo 'OK';
  
// Die Daten nun als E-Mail senden, in einer 
  // Datei oder Datenbank speichern.
 
}

}
?>

Es geht noch einfacher!

Möchte man das Formular und das PHP-Script in einer einzigen Datei zusammen fassen, so lässt sich dies auch realisieren.

Datei "scripts/formulardaten_ueber_ajax_ueberpruefen_und_speichern/check2.php" wurde nicht gefunden!

Tipps

Webseiten schneller machen
Webseitenbesucher sind ungeduldig, um Besucher und Suchmaschinen bei der Stange zu halten, darf Ihre Website keine Zeit verlieren.
SQLite-Datei mit PHP und PDO erstellen
Der Vorteil von SQLite ist, das die Datenbank eine Text-Datei ist und keine Verbindung zu einem Datenbank-Server benötigt wird.
Bilder in den Browser laden per File API
Wenn Bilder hoch geladen werden sollen, ist es für dem Benutzer wissenswert welche Bilder er überhaupt ausgewählt hat. Diese JavaScript-Funktion zeigt Bilder vor dem hochladen im Browser an.
Diese Schlagwörter könnten Sie interessieren:
Silbentrennung CSRF-Token Webseitenschutz Zeichnen Zoom-Funktion Sitemaps-Protokoll Rahmen Zeichenkodierung Mehrfachauswahl localStorage Sicherheit Fotoalbum RSS Feed Floodsperre EVA-Prinzip Zeitfunktionen Zebra-Tabelle Dateibrowser Event-Kalender CSS-Counter