Mit JQuery Formulardaten senden ohne Seitenaktualisierung

Immer öfter äußern Forenuser den Wunsch, Formulardaten zu senden, ohne dass eine Aktualisierung der Seite stattfindet.

Da es sich dabei meistens um ein Login-Script handelt, geht diese Kurzanleitung darauf ein.

Kurzanleitung heißt, es werden nur die nötigsten Schritte erklärt, um das Ganze nicht unnötig aufzublähen:

- Wie können Formulardaten gesendet werden

- Wie werden die Daten verarbeitet

- Keine Validierung von Daten, auch keine Verschlüsselung des Passworts

Das Formular

Das Formular enthält zwei Textfelder, Benutzername und Passwort.

Einen "Submit-Button" im Formular gibt es in der form nicht. Stattdessen wird ein Button "außerhalb" des Formulars definiert,

der die Funktion zum Senden der Daten auslöst. Wird der Button innerhalb des Formulars definiert, wird die Seite aktualisiert.

Zudem wird auch noch ein Html-Element benötigt, in welchem Meldungen ausgegeben werden. Das kann ein Absatz, ein Div,

eine Überschrift(h1) oder ähnliches sein.

<form action="" method="post">  
<p>Username <input type="text" name="username" id="username"></p>  
<p>Passwort <input type="password" name="passwort" id="passwort"></p>  
</form>
<p><button onclick="SendFormData()">Senden</button></p>  
<p id = "outputAll">&nbsp;</p>  

JavaScript/JQuery

Nach Anklicken des Buttons wird die Funktion SendFormData aufgerufen (s.o.: Buttondefinition).

Zum "Einsammeln" von Formulardaten bietet JQuery die Funktion .serializeArray an.

Dazu wird ein Selektor definiert, an den die Funktion wie in JavaScript üblich angehangen wird.

Die Formulardaten werden somit wie folgt in einer Variablen gespeichert.

. . .
var form_data = $("form :input").serializeArray();  
. . .

Anschließend werden die Daten mit der JQuery-Funktion .post an ein PHP-Script gesendet.

Die Funktion erwartet zumindest 2 Parameter:

- Den Namen des Zielscripts

- Die Formulardaten

. . .
$.post("hier_werden_die_daten_verarbeitet.php", form_data)  
. . .

Passiert beim Senden ein Fehler, z.B. Schreibfehler beim Dateinamen des Zielscripts, kann noch eine Meldung ausgegeben werden.

. . .
.error(function(){alert("Ein Fehler ist aufgetreten.");})  
. . .

Das ist, zumindest für dieses kleine Formular, das ganze Hexenwerk der Senderei. Fehlt noch eins:

Das PHP-Script zur Datenverarbeitung läuft ja im Hintergrund. Es nutzt also nichts, dort zum Beispiel

eine Meldung wie Falsches Passwort auszugeben, weil man nichts sieht.

Dazu wird, nach erfolgreichem Senden, eine JavaScript-Funktion aufgerufen.

. . .
.success(function(data) {ShowMsg(data);});
. . .

Verarbeitung der Daten

Das PHP-Script prüft als erstes auf Vollständigkeit der Daten.

Dann wird eine Abfrage abgesetzt, und geprüft, ob der Benutzername gefunden wurde und ob das Passwort richtig ist.

Ist eins der Ergebnisse negativ, werden der Wert false und eine Meldung in einem Array abgelegt und ausgegeben.

Anschließend wird das Script beendet. z.B.:

. . .
$msg = array(false, "Das eingegebene Passwort ist falsch.");  
 print_r(json_encode($msg));
 exit;
. . .

Ist alles ok, werden der Wert true und eine Meldung in einem Array abgelegt und ausgegeben.

Die Auswertung des Boolschen Wertes sowie die Ausgabe der Meldung erfolgt in der JavaScript-Funktion.

. . .
function ShowMsg(data) {
 var response = $.parseJSON(data);
 /* Es ist ein Fehler aufgetreten */
 if(response == false){
  document.getElementById("passwort").value = "";  
  document.getElementById("outputAll").innerHTML = response[1];  
	return;
 }
 /* Alles O.K. */
 document.getElementById("username").value = "";  
 document.getElementById("passwort").value = "";  
 document.getElementById("outputAll").innerHTML = response[1];  
}
. . .

Zum Schluß beide Scripte im Zusammenhang.

Das Formularscript

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Formulardaten mit Ajax senden</title>
<script src="jquery-1.10.1.js" type="text/javascript"></script>  
<script type="text/javascript">  
function SendFormData(){
 /*
 * Parameter definieren.
 */
 /* Die Input-Felder in einer Variablen ablegen. */
 var form_data = $("form :input").serializeArray();  
 
 /* Das Zielscript aufrufen, mit den Formulardaten als Parameter. */
 $.post("a_0formularfelder_pruefen2.php", form_data)  
 
 /* Senden mißlungen? */
 .error(function(){alert("Ein Fehler ist aufgetreten.");})  
 
 /* Funktionsaufruf um Meldung vom Zielscript auszugeben. */
 .success(function(data) {ShowMsg(data);
 });
}
/*
* Meldung des Scripts "a_0formularfelder_pruefen2.php" im DIV ausgeben. 
*/
function ShowMsg(data) {
 var response = $.parseJSON(data);
 /* Es ist ein Fehler aufgetreten */
 if(response == false){
  document.getElementById("passwort").value = "";  
  document.getElementById("outputAll").innerHTML = response[1];  
	return;
 }
 /* Alles O.K. */
 document.getElementById("username").value = "";  
 document.getElementById("passwort").value = "";  
 document.getElementById("outputAll").innerHTML = response[1];  
}
</script>
</head>
<body>
<?php 
if(isset($_SESSION['username'])){  
 echo "<p>Eingeloggter User: ".$_SESSION['username']."</p>";  
}
?>
<form action="" method="post">  
<p>Username <input type="text" name="username" id="username"></p>  
<p>Passwort <input type="password" name="passwort" id="passwort"></p>  
</form>
<p><button onclick="SendFormData()">Senden</button></p>  
<p id = "outputAll">&nbsp;</p>  
</body>
</html>

Das PHP-Zielscript

<?php
session_start();
/*
* Prüfen, ob alle Felder ausgefüllt wurden.
*/
$filled  = true;
foreach($_POST as $key => $value){
 /* Variable $filled auf false setzen, wenn ein oder mehr Feld(er) nicht ausgefüllt ist/sind */
 if(strlen(trim($value)) === 0) $filled = false;
}

/*
* Sind nicht alle Felder ausgefüllt, Meldung ausgeben und Script beenden.
*/
if(!$filled){
 $msg = array(false, "Es wurden nicht alle Felder ausgefuellt.");  
 print_r(json_encode($msg));
 exit;
}

/*
* Die Einfügeabfrage definieren
*/
$query = "select username, passwort from tabelle52 where username = '".$_POST['username']."'";  

/*
* Abfrage ausführen
*/
$conn = new PDO("mysql:host=localhost;dbname=test", "guenni", "guenni");  
$stmt = $conn->prepare($query);
$error = $stmt->execute();
if($error === false){
 print_r(json_encode($stmt->errorInfo()));
 /* Oder eigene Fehlermeldung ausgeben. */
 exit;
}

/*
* Abfrageergebnis speichern
*/
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

/*
* Existiert der Username in der Tabelle?
* !!! Die Funktion strcmp unterscheidet Groß- und Kleinschreibung !!!
*/
if(strcmp($results['username'], $_POST['username'])!==0){  
 $msg = array(false, "Der Username ".$_POST['username']." wurde nicht gefunden.");  
 print_r(json_encode($msg));
 exit;
}

/*
* Ist das Passwort korrekt?
*/
if((strcmp($results['username'], $_POST['username'])===0) && (strcmp($results['passwort'], $_POST['passwort'])!==0)){  
 $msg = array(false, "Das eingegebene Passwort ist falsch.");  
 print_r(json_encode($msg));
 exit;
}

/*
* Username gefunden und Passwort korrekt?
*/
if((strcmp($results['username'], $_POST['username'])===0) && (strcmp($results['passwort'], $_POST['passwort'])===0)){  
 $_SESSION['username'] = $results['username'];  
 $msg = array(true, "Login ".$results['username']." war erfolgreich.");  
 print_r(json_encode($msg));
}
?>