Erstellen eines schlanken AJAX-E-Mail-Anmeldeformulars

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial erfahren Sie, wie Sie ein elegantes E-Mail-Anmeldeformular erstellen. Dieses Formular nutzt die volle Leistungsfähigkeit von AJAX, was bedeutet, dass wir Daten an den Server senden, validieren und eine Antwort erhalten - alles ohne eine einzige Seitenaktualisierung! Unterwegs sollten Sie einige nützliche Tipps zu PHP und JavaScript sowie allgemeine Best Practices für die Programmierung mitnehmen.

Schritt 1: Der Plan

Wir möchten also ein E-Mail-Anmeldeformular erstellen, aber nicht irgendein Anmeldeformular: Wir möchten ein superreaktionsfähiges, AJAX-gestütztes E-Mail-Anmeldeformular erstellen. Dies bedeutet, dass keine lästigen Seitenaktualisierungen erforderlich sind, der Endbenutzer Statusaktualisierungen in Echtzeit erhält und die ganze saftige Güte der serverseitigen Datenvalidierung. Hier ist ein Flussdiagramm, das genau zeigt, wie dies funktionieren soll:

Um all diesen Hokuspokus zu erreichen, müssen wir einige ziemlich coole Webtechnologien verwenden. Dazu gehören JavaScript (mit etwas Hilfe von jQuery), AJAX, PHP, MySQL und JSON. Hier ist ein Überblick darüber, wofür wir jede Technologie verwenden werden:

JavaScript - Senden Sie Daten an den Server und analysieren Sie vom Server empfangene Nachrichten. Wir werden jQuery verwenden, um unsere AJAX-Aufrufe zu verarbeiten und unser JSON zu analysieren.
PHP - Verarbeitet die an den Server gesendeten Daten. Dies beinhaltet die Validierung der Daten (sicherstellen, dass sie in die Datenbank eingefügt werden können) und die Verarbeitung der Antwort, die an den Browser zurückgesendet wird.
MySQL - Speichern Sie die Anmeldedaten.
JSON - Kleben Sie alles oben Genannte zusammen. Ich werde später in diesem Tutorial mehr über JSON erklären.

Wir wissen also, wie es funktionieren soll, und wir wissen, welche Technologien wir einsetzen wollen: Es ist Zeit, loszulegen!

Schritt 2: Einrichten der MySQL-Datenbank

Ok, das Wichtigste zuerst: Wir müssen unsere Datenbank einrichten. Im Moment möchten wir nur die E-Mail-Adresse des Benutzers sowie das Datum und die Uhrzeit der Anmeldung erfassen. Öffnen Sie PHPMyAdmin (oder ein beliebiges Programm, mit dem Sie Ihre MySQL-Datenbank verwalten) und erstellen Sie eine neue Tabelle in Ihrer Datenbank mit der folgenden Anweisung:

CREATE TABLE `signups` (
  `signups_id` int(10) NOT NULL AUTO_INCREMENT,
  `signup_email_address` varchar(250) DEFAULT NULL,
  `signup_date` date DEFAULT NULL,
  `signup_time` time DEFAULT NULL,
  PRIMARY KEY (`signups_id`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

Das Obige sollte für das, was wir brauchen, ausreichen. signups_id ist ein automatisch inkrementierendes Feld, um jedem Datensatz eine eindeutige ID zuzuweisen, signup_email_address ist ein Varchar-Feld und ist die E-Mail-Adresse, mit der sich der Benutzer anmeldet, und signup_date und signup_time sind Datums- und Zeitfelder, die aufzeichnen, wenn der Benutzer sich unterschrieb oben. Als nächstes müssen wir den HTML-Code einrichten.

Schritt 3: HTML einrichten

<form id="newsletter-signup" action="?action=signup" method="post">
    <fieldset>
        <label for="signup-email">Sign up for email offers, news & events:</label>
        <input type="text" name="signup-email" id="signup-email" />
        <input type="submit" id="signup-button" value="Sign Me Up!" />
        <p id="signup-response"></p>
    </fieldset>
</form>

Dies sollte das absolute Minimum an HTML sein, das wir brauchen, um dies zum Laufen zu bringen (ich habe die Body-Tags oder Header-Zeug in diesem Snippet nicht eingefügt, nur um Platz zu sparen. Beachten Sie, dass jQuery auf Ihrer Seite geladen sein muss). Alles, was wir brauchen, ist eine Texteingabe, eine Schaltfläche zum Senden und einen Platzhalter für die Nachricht. Offensichtlich benötigen Sie eine Bezeichnung für die Eingabe, und ich habe ein Feldset verwendet, da ich mit einem strengen XHTML-Doctype arbeite. Der Platzhalter ist dort, wo unsere Statusmeldung an den Benutzer angezeigt wird. Im Moment sollte es nur leer sein.

Hier ist also unsere Form in all ihrer Pracht. Sieht ziemlich schlicht aus, nicht wahr? Ich werde etwas CSS für unser Formular machen, damit es etwas weniger Windows95-artig aussieht.

* { 
    padding:0;
    margin:0;
}

body {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;	
}

fieldset {
    border:none;	
}

form {
    width:930px;
    margin:20% auto;	
    padding:15px;
    border:solid 6px #9FCBFF;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

input {
    border:none;
    background-color:none;	
}

#signup-email {
    border:1px solid #999999;
    color:#9E9E9E;
    padding:5px;
    margin-left:10px;
    margin-right:4px;
}

#signup-email:focus {
    border-color:#9FCBFF;
    background-color:#DFEEFF;
    background-image:none;
    color:#000;
}

#signup-button {
    background-color:#9FCBFF;
    color:#FFF;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    padding:5px;
    text-shadow: 1px 1px 1px #5FA8FF;	
}

#signup-button:hover {
    cursor:pointer;
    background-color:#7FB9FF;
}

#signup-response {
    display:inline;
    margin-left:4px;
    padding-left:20px;
}

.response-waiting {
    background:url("loading.gif") no-repeat;
}

.response-success {
   background:url("tick.png") no-repeat;
}

.response-error {
   background:url("cross.png") no-repeat;
}

Das ist besser. Obwohl unsere Antwortnachricht noch nicht sichtbar ist (da noch keine Antwort vorhanden ist), wird sie wie folgt neben der Schaltfläche "Anmelden" angezeigt:

Schritt 4: Der Kleber

Nachdem der Datenbankzugriff und das Markup abgeschlossen sind, müssen wir wissen, wie wir die beiden miteinander verknüpfen.

Wie wird JavaScript in der Lage sein, Nachrichten aus einer völlig anderen Programmiersprache (PHP) zu senden und zu empfangen? Wir werden etwas namens JSON verwenden.

Was ist JSON?

JSON (JavaScript Object Notation) ist ein leichtgewichtiger, textbasierter offener Standard, der für den menschenlesbaren Datenaustausch entwickelt wurde (ähnlich XML in der Absicht). JSON wird häufig zum Serialisieren und Übertragen strukturierter Daten über eine Netzwerkverbindung verwendet. Es wird hauptsächlich verwendet, um Daten zwischen einem Server und einer Webanwendung zu übertragen und dient als Alternative zu XML. JSON ist aus der Programmiersprache JavaScript abgeleitet, um einfache Datenstrukturen und assoziative Arrays, sogenannte Objekte, darzustellen. Trotz seiner Beziehung zu JavaScript ist es sprachunabhängig und Parser sind für praktisch jede Programmiersprache verfügbar. Ja, dazu gehört auch PHP. Hier ist ein Ausschnitt von JSON:

1	{"hey I'm a key":"and I'm its value!"}

Wie Sie sehen, ist es supereinfach. Wir haben ein Schlüssel-Wert-Paar in einige geschweifte Klammern gekapselt. Die Schlüssel-Wert-Paar-Beziehung wird mit einem Doppelpunkt angegeben. Die geschweiften Klammern zeigen an, dass es sich um ein Objekt handelt und alles darin enthaltene Teil dieses Objekts ist. Sie können mehrere Schlüssel-Wert-Paare in einem Objekt haben:

1	{"hey I'm a key":"and I'm its value!",
2	"hey I'm another key":"and I'm its value!",
3	"you guessed it, I'm a key":"and I'm its value!"}

Wir haben lediglich die Schlüssel-Wert-Paare mit einem Komma aufgeteilt. Die Schlüssel-Wert-Paare werden tatsächlich als Mitglieder des Objekts (das JSON-Objekt) bezeichnet. Sie können noch ausgefallener werden und ein Array als Wert eines Schlüssels haben, der mehr Objekte enthält

{"key1": {  
  "key2": "value2",
  "key3": "value3",  
  "key4": {  
    "value4": [ 
      {"newobject_1_key_1": "newobject_1_value_1", "newobject_1_key_2": "newobject_1_value_2"},
      {"newobject_2_key_1": "newobject_2_value_1", "newobject_2_key_2": "newobject_2_value_2"},  
      {"newobject_3_key_1": "newobject_3_value_1", "newobject_3_key_2": "newobject_3_value_2"}  
     ]
  }
}}

Gehen wir das durch:

Der Wert von Key1 ist ein Objekt.
Innerhalb dieses Objekts befinden sich Schlüssel-Wert-Paare für key2 und key3.
Key4 hat ein Objekt für seinen Wert.
Wert 4 ist ein Array von 3 weiteren Objekten, die jeweils 2 Schlüssel-Wert-Paare enthalten.

Aber das wird für unsere Bedürfnisse zu kompliziert.

Alles, was wir tun müssen, ist, den Server dazu zu bringen, uns eine JSON-Antwort mit zwei Mitgliedern (Schlüssel-Wert-Paaren) zu senden: eines für den Status und eines für die Nachricht. Das wird so aussehen:

1	{"status":"success","message":"Wahey! You've been signed up!"}

status zeigt an, ob der Anmeldevorgang erfolgreich war oder nicht. message ist die Nachricht, die sich auf den status bezieht. Wenn der status 'success' lautet, möchten wir dem Benutzer mitteilen, dass er sich angemeldet hat. Wenn der status 'error' lautet, möchten wir dem Benutzer mitteilen, was schief gelaufen ist. Wenn wir dem Benutzer also über das message mitglied mitteilen, was passiert ist, warum brauchen wir dann das status mitglied? Nun, es gibt zwei Gründe. Die erste ist, dass wir eine Klasse auf den Halter der Antwortnachricht anwenden möchten, sodass wir ein grünes Häkchen für Erfolg und ein rotes Kreuz für einen Fehler anzeigen. Der zweite Grund ist, dass nur eine Erfolgsmeldung zurückgesendet werden kann (die angibt, dass der Benutzer angemeldet ist), es jedoch bis zu vier Fehlermeldungen gibt, die zurückgesendet werden können. In folgenden Fällen treten Fehlermeldungen auf:

Der Benutzer hat keine E-Mail-Adresse eingegeben.
Der Benutzer hat eine ungültige E-Mail-Adresse eingegeben.
Die vom Benutzer eingegebene E-Mail-Adresse wurde bereits verwendet.
Es liegt ein technischer Fehler vor und der Benutzer kann nicht validiert oder zur Datenbank hinzugefügt werden.

Das bedeutet, dass wir auch die genauen Textantworten jeder Nachricht kennen müssen, um dem Nachrichteninhaber die richtige Klasse zuzuordnen. Dies entspricht einem massiven Kopfschmerz. Was ist, wenn wir die zurückgesendete Nachricht ändern möchten? Wir müssten dann auch den Code überarbeiten, der verwendet wird, um die Klasse dem Nachrichtenhalter zuzuweisen. Es ist so viel einfacher, den Status zurückzusenden.

Machen Sie sich keine Sorgen, wenn Sie diesen JSON-Malarkey noch nicht verstehen; wie wir arbeiten

Premium-Mitglieder: Dieses Video herunterladen (Muss eingeloggt sein)

Durch den Rest des Tutorials sollte es beginnen, sich zusammenzusetzen.

Schritt 5: Alles vorbereiten

Normalerweise wird der Browser beim Absenden eines Formulars zur Aktion des Formulars umgeleitet. Wir möchten nicht, dass dies geschieht, da wir Daten im Formular mit AJAX senden möchten. Das erste, was wir tun müssen, ist, das Formular daran zu hindern, uns weiterzuleiten, wenn auf die Schaltfläche zum Senden geklickt wird.

$(document).ready(function(){
   $('#newsletter-signup').submit(function(){

        //do our ajax stuff here
		
        //prevent form from submitting
        return false;
    })
})

Hier sagen wir: "Wenn das Dokument fertig ist und das Absende-Ereignis für ein Element mit der ID der Newsletter-Anmeldung (das zufällig unser Formular ist) ausgelöst wird, führen Sie den Code in der Funktion aus." Hier fügen wir den AJAX-Aufruf, den JSON-Antworthandler und alles andere ein, das erforderlich ist, damit unser Formular wie gewünscht funktioniert. Der einzige Code in dieser Funktion ist derzeit return false. Dadurch wird das Absenden des Formulars verhindert, was wiederum dazu führt, dass es uns nicht weiterleitet. Als nächstes müssen wir die Variablen einrichten, die wir verwenden werden.

var form = $(this),
    formData = form.serialize(),
    formUrl = form.attr('action'),
    formMethod = form.attr('method'), 
    responseMsg = $('#signup-response')

Hier deklarieren wir mehrere Variablen gleichzeitig. Es spart nur das fünfmalige Schreiben des Schlüsselworts var. Gute Zeiten. Wie auch immer, hier ist, wofür jede Variable steht:

form - Wir verwenden das Schlüsselwort this, das in das jQuery-Objekt eingeschlossen ist. this bezieht sich auf das eigentliche Formularelement. Wir möchten es in das jQuery-Objekt einschließen, damit wir andere jQuery-DOM-Funktionen verwenden können.
formdata - Wir verwenden die jQuery serialize()-Funktion, um alle Formulardaten abzurufen. In seiner einfachsten Form ruft serialize() alle Formularfelder und alle ihre Werte ab und fügt sie in Schlüssel-Wert-Paare innerhalb eines Strings ein. Wir senden diese Datenfolge dann an den Server.
formUrl - Dies ist die URL, an die wir unsere Daten senden möchten.
formMethod - Dies ist die Methode, mit der wir unsere Daten senden möchten.
responseMsg - Dies ist das Element, das wir verwenden werden, um dem Benutzer unsere Nachricht anzuzeigen.

Auf diese Weise erhalten wir die Formular-URL und die Formularmethode, sodass wir das JavaScript nicht ändern müssen, wenn wir ändern möchten, wo und wie wir die Daten im HTML-Code an den Server senden. Wir speichern das Antwortnachrichtenelement in einer Variablen, sodass wir das DOM nur einmal danach durchsuchen müssen. Das DOM ständig nach einem Element abzufragen ist verschwenderisch.

Da wir AJAX zum Senden des Formulars verwenden werden, sollten wir dem Endbenutzer einen Hinweis darauf geben, dass wir sozusagen hinter den Kulissen arbeiten. Dazu setzen wir den Text des Inhabers der Antwortnachricht auf "Bitte warten..." und geben ihm die Klasse "Antwort wartet". Dies gibt ihm ein cooles Lade-Gif :).

		
//show response message - waiting
responseMsg.hide()
           .addClass('response-waiting')
           .text('Please Wait...')
           .fadeIn(200);

Wir blenden zuerst den Halter der Antwortnachricht aus, damit er beim Festlegen des Textes nicht sofort angezeigt wird. Als nächstes fügen wir die Klasse 'response-waiting' hinzu. Danach setzen wir den Text auf 'Bitte warten...' und blenden ihn schließlich ein. Alles, was wir hier tun, ist die Verkettung von jQuery-Funktionen. Der responseMsg-Code könnte in eine Zeile geschrieben werden; Ich habe es nur aufgeteilt, um es leichter zu lesen.

1	responseMsg.hide().addClass('response-waiting').text('Please Wait...').fadeIn(200);

Schritt 6: Senden an den Server

Okay, es ist Zeit, zum saftigen Teil zu kommen. Nachdem wir nun unsere Daten haben und dem Besucher visuelles Feedback gegeben haben, verwenden wir eine jQuery-Funktion, um die Daten an den Server zu senden.

$(document).ready(function(){
    $('#newsletter-signup').submit(function(){

        //setup variables
        var form = $(this),
        formData = form.serialize(),
        formUrl = form.attr('action'),
        formMethod = form.attr('method'), 
        responseMsg = $('#signup-response')

        //show response message - waiting
        responseMsg.hide()
                   .addClass('response-waiting')
                   .text('Please Wait...')
                   .fadeIn(200);

        //send data to server
        $.ajax({
            url: formUrl,
            type: formMethod,
            data: formData,
            success:function(data){
                //do something when ajax call is complete
            }
        })

        //prevent form from submitting
        return false;
    })
})

Die Magie passiert hier:

$.ajax({
    url: formUrl,
    type: formMethod,
    data: formData,
    success:function(data){
        //do something we ajax call is complete
    }
})

Wir verwenden die jQuery-Funktion $.ajax(), um die Daten an den Server zu senden. Diese Funktion verarbeitet all die komplizierten browserübergreifenden XML-HTTP-Request, an denen wir nicht wirklich interessiert sind. Ist Ihnen hier etwas aufgefallen? Sieht einem JSON-Objekt sehr ähnlich...

Wir müssen einige Informationen an die Funktion $.ajax() übergeben, damit sie weiß, was zu tun ist und wie es zu tun ist. Sie können der Funktion $.ajax() mehrere Parameter übergeben, aber für dieses Tutorial müssen wir ihr nur die Parameter url, type, data und success übergeben.

url - Dies ist die URL, an die wir unsere Daten senden möchten. Wir haben dies zuvor in einer Variablen namens formURL gespeichert.
type - Dies ist die Methode, mit der wir unsere Daten an den Server senden möchten. Wir haben dies zuvor in einer Variablen namens formMethod gespeichert.
data - Dies sind die Daten, die wir an den Server senden möchten. Wir haben dies in einer Variablen namens code>formDataearlier gespeichert
success - Dies ist eine Rückruffunktion. Es wird aufgerufen, wenn der AJAX-Aufruf erfolgreich ist. In dieser Funktion verarbeiten wir die JSON-Antwort, die wir vom Server erhalten.

Schritt 7: Die Erfolgsfunktion

Sobald wir die Daten an den Server übermittelt haben, sendet dieser uns eine Antwortnachricht zurück. Die Nachricht ist ein gut formatierter JSON-String. Zum Glück hat jQuery eine nette Funktion, um JSON zu analysieren.

success:function(data){
				
    //setup variables
    var responseData = jQuery.parseJSON(data), 
        klass = '';
}

Die an die Erfolgsfunktion übergebenen data-Argument sind unsere vom Server zurückgegebene JSON-Antwort. Innerhalb dieser Funktion möchten wir zunächst zwei Variablen einrichten:

responseData - Dies enthält die geparste JSON-Antwort. Die Funktion $.parseJSON() verwandelt unsere JSON-Antwort in ein JavaScript-Objekt.
klass - Dies ist eine Variable, die wir später festlegen werden. Es enthält den Namen der Klasse, die wir auf den Inhaber der Antwortnachricht anwenden möchten, basierend auf der Antwort, die wir vom Server erhalten. Wenn Sie sich fragen, warum wir die Klassenvariable klass nennen, liegt das daran, dass das Wort klass in JavaScript ein reserviertes Wort ist und nicht als Variablenname verwendet werden kann.

Als nächstes müssen wir bestimmen, welche CSS-Klasse wir auf den Halter der Antwortnachricht anwenden sollen. Die Klasse basiert auf dem Status, den der Server zurückgibt. Wenn der Status 'success' ist, geben wir ihm die Klasse 'response-success' und wenn der Status 'error' ist, geben wir ihm eine Klasse von 'response-error'

//response conditional
switch(responseData.status){
    case 'error':
        klass = 'response-error';
    break;
    case 'success':
        klass = 'response-success';
    break;	
}

Die CSS-Klassen, die auf die Statusmeldungen angewendet werden, sehen wie folgt aus:

Die erste ist die Lademeldung (.response-loading), die zweite ist die Erfolgsmeldung (.response-success) und die dritte ist die Fehlermeldung (.response-error).

Wir verwenden eine switch-Anweisung, um basierend auf dem Status zu bestimmen, welche Klasse verwendet werden soll. Ich hätte if-Anweisungen verwenden können, aber dies ist eine bessere Methode. Die Bedingung, mit der wir vergleichen möchten, ist responseData.status. responseData ist ein Objekt und status ist eine Eigenschaft dieses Objekts. Dieses Objekt wurde von der Funktion $.parseJSON() erstellt und basiert auf unserer JSON-Antwort. Diese Antwort gibt zwei Elemente zurück: status und message. Diese werden in Eigenschaften des responseData-Objekts umgewandelt. In diesem Switch haben wir zwei Fälle, mit denen responseData.status verglichen werden kann. Wenn responseData.status gleich der Zeichenfolge 'error' ist, wird die Variable klass auf 'response-error' gesetzt. Wenn responseData.status gleich dem String 'success' ist, wird die klass-Variable auf 'response-success' gesetzt. Jetzt müssen Sie dem Benutzer nur noch die Nachricht anzeigen.

//show reponse message
responseMsg.fadeOut(200,function(){
    $(this).removeClass('response-waiting')
           .addClass(klass)
           .text(responseData.message)
           .fadeIn(200,function(){
               //set timeout to hide response message
               setTimeout(function(){
                   responseMsg.fadeOut(200,function(){
                       $(this).removeClass(klass);
                   });
               },3000)
            })
})

Die erste Aufgabe, die wir ausführen, besteht darin, den Halter der Antwortnachricht auszublenden, da er derzeit auf "Bitte warten..." eingestellt ist. Sobald dies abgeschlossen ist, entfernen wir die Klasse 'response-waiting', fügen entweder die Klasse 'error' oder 'success' hinzu, legen den Text als die vom Server zurückgesendete Nachricht fest und blenden ihn schließlich wieder ein. All dies geschieht über den Callback der Funktion fadeOut(). Sobald die Nachricht eingeblendet ist, möchten wir nicht, dass sie für immer bestehen bleibt, also setzen wir eine Zeitüberschreitung, um die Nachricht nach drei Sekunden wieder auszublenden. Dies geschieht alles über den Callback der Funktion fadeIn().

Wie Sie sehen, nutzen wir die Callback-Funktionen von jQuery. Diese stellen sicher, dass alles zur richtigen Zeit in der richtigen Reihenfolge ausgeführt wird. Wenn wir die Callback-Funktionen nicht verwenden würden, würden wir in eine Situation geraten, in der wir die Nachricht einblenden und ihr sofort das Ausblenden mitteilen, obwohl das Einblenden noch nicht abgeschlossen ist. Wenn der Halter der Antwortnachricht ausgeblendet ist, möchten wir schließlich alle Klassen entfernen, die wir ihm zugewiesen haben. Das war's für die Erfolgsfunktion!

Und das war's auch für das JavaScript. Wir haben unsere Variablen eingerichtet, unsere Statusnachricht festgelegt, die Daten über AJAX gesendet, eine JSON-Antwort erhalten, die JSON geparst und den Status der Übermittlung an den Benutzer zurückgegeben. Ihr vollständiger JavaScript-Code sollte wie folgt aussehen:

$(document).ready(function(){
    $('#newsletter-signup').submit(function(){

        //setup variables
        var form = $(this),
        formData = form.serialize(),
        formUrl = form.attr('action'),
        formMethod = form.attr('method'), 
        responseMsg = $('#signup-response');

        //show response message - waiting
        responseMsg.hide()
                   .addClass('response-waiting')
                   .text('Please Wait...')
                   .fadeIn(200);

        //send data to server for validation
        $.ajax({
            url: formUrl,
            type: formMethod,
            data: formData,
            success:function(data){

                //setup variables
                var responseData = jQuery.parseJSON(data), 
                    klass = '';

                //response conditional
                switch(responseData.status){
                    case 'error':
                        klass = 'response-error';
                    break;
                    case 'success':
                        klass = 'response-success';
                    break;	
                }

                //show reponse message
                responseMsg.fadeOut(200,function(){
                    $(this).removeClass('response-waiting')
                           .addClass(klass)
                           .text(responseData.message)
                           .fadeIn(200,function(){
                               //set timeout to hide response message
                               setTimeout(function(){
                                   responseMsg.fadeOut(200,function(){
                                       $(this).removeClass(klass);
                                   });
                               },3000);
                            });
                 });
              }
        });

        //prevent form from submitting
        return false;
    });
});

Schritt 8: Serverseitige Validierung

Nachdem wir nun den HTML-Code vorbereitet haben und das JavaScript zum Senden und Empfangen von Daten bereit ist, müssen wir unseren serverseitigen Code schreiben, um die übergebenen Daten zu verarbeiten, und eine JSON-Antwort an das JavaScript zurücksenden. Für dieses Tutorial ist PHP unsere bevorzugte serverseitige Sprache.

if($_GET['action'] == 'signup'){
    mysql_connect('localhost','YOUR DB USERNAME','YOUR DB PASSWORD');  
    mysql_select_db('YOUR DATABASE THAT CONTAINS THE SIGNUPS TABLE');
    $email = mysql_real_escape_string($_POST['signup-email']);

    //do some stuff

    exit;
}

Hier sagen wir, dass wenn im Abfragestring (wie wir das $_GET-Array verwenden) der Parameter action gleich 'signup' ist, dann diesen Code ausführen. Dies ist eine gute Möglichkeit, unseren AJAX-Aufruf zu kapseln. Zuerst definieren wir unsere MySQL-Verbindung mit der in PHP eingebauten mysql_connect()-Funktion. Um dies mit unserer Datenbank zu verbinden, müssen wir ihm den Host, den Benutzernamen des Datenbankbenutzers und das Kennwort des Datenbankbenutzers geben. Wir müssen hier keine Fehlerprüfung durchführen, da wir dies später im Skript tun werden. Als nächstes wählen wir die Datenbank aus, auf die wir mit mysql_select_db() zugreifen möchten.

Nachdem wir unseren Datenbankzugriffscode eingerichtet haben, können wir die Funktion mysql_real_escape_string() verwenden, um die Daten zu bereinigen, die wir an den Server senden. Dies macht die Daten für das Einfügen in die Datenbank sicher, indem bestimmte Zeichen, die als unsicher eingestuft werden, mit Escapezeichen versehen werden. Da wir die Daten an den Server senden, verwenden wir das Array $_POST, um auf unsere E-Mail-Adresse zuzugreifen. $_POST['signup-email'] erhält unsere E-Mail-Adresse und wir speichern sie in einer Variablen namens $email. Die letzte Codezeile ist die exit-Anweisung. Dadurch wird die Ausführung des Rests des Skripts gestoppt. Dies ist nützlich, wenn wir hier viel Code haben, da wir nur das benötigte Bit ausführen und den Rest ignorieren möchten. Dies ist wichtig, um unsere AJAX-Anrufe angenehm schnell zu halten. Als nächstes müssen wir die Daten validieren, um sicherzustellen, dass kein alter Müll in die Datenbank eingefügt wird.

//validate email address - check if input was empty
if(empty($email)){
    $status = 'error';
    $message = 'You did not enter an email address!';
}
else if(!preg_match($emailRegex, $email)){ //validate email address - check if is a valid email address
    $status = 'error';
    $message = 'You have entered an invalid email address!';
}
else {
    $existingSignup = mysql_query("SELECT * FROM signups WHERE signup_email_address='$email'");   
    if(mysql_num_rows($existingSignup) < 1){

        //database insert code
   
    }
    else {
        $status = 'error';
        $message = 'This email address has already been registered!';
    }
}

Wir müssen nur drei Überprüfungen unserer Daten durchführen:

Stellen Sie sicher, dass der Benutzer tatsächlich eine E-Mail-Adresse angegeben hat
Stellen Sie sicher, dass die übermittelte E-Mail-Adresse eine gültige E-Mail-Adresse ist
Stellen Sie sicher, dass die angegebene E-Mail-Adresse nicht bereits für die Anmeldung verwendet wurde

Wir verwenden eine Reihe von if-Anweisungen, um dies zu erreichen. Das erste if verwendet die PHP-Funktion empty(), um zu überprüfen, ob die Variable $email tatsächlich etwas enthält. Wenn die Variable gleich einem leeren String ist, 0, '0', false oder null, wird true zurückgegeben (was bedeutet, dass wir eine leere Variable haben). Wenn wir eine leere Variable haben, setzen wir eine Variable namens $status auf 'Fehler' und eine Variable namens $message auf 'Sie haben keine E-Mail-Adresse eingegeben!'. Wenn unsere Variable nicht leer ist, können wir überprüfen, ob es sich um eine gültige E-Mail-Adresse handelt. Dazu verwenden wir eine PHP-Funktion namens preg_match(). Wir geben dieser Funktion einen regulären Ausdruck (die lange Zeichenfolge voller seltsamer Zeichen) und unsere E-Mail-Adresse. Wenn die E-Mail-Adresse mit dem regulären Ausdruck übereinstimmt, gibt die Funktion 1 zurück (was wahr entspricht). Wenn es nicht übereinstimmt, wird 0 zurückgegeben (was false entspricht). In unserem Fall, wenn preg_match() false zurückgibt, wissen wir, dass die E-Mail-Adresse ungültig ist. Daher setzen wir unsere $status-Variable auf 'error' und unsere $message-Variable auf 'Sie haben eine ungültige E-Mail-Adresse eingegeben!'. Andernfalls, wenn preg_match() true zurückgibt, können wir mit der nächsten Prüfung fortfahren, bei der wir die Datenbank abfragen müssen, um zu sehen, ob unsere E-Mail-Adresse bereits registriert ist. Wir können die PHP-Funktion mysql_query() verwenden, die eine SQL-Abfrage akzeptiert, die Datenbank abfragt und eine Ressource zurückgibt. Wir müssen nichts über die Daten wissen, die mysql_query() zurückgibt; wir müssen nur wissen, wie viele Datensätze zurückgegeben werden. Wenn mehr als 0 zurückgegeben wird, wurde diese E-Mail-Adresse zuvor für die Anmeldung verwendet, daher setzen wir unsere Variablen $status und $message entsprechend. Wenn keine Datensätze zurückgegeben werden, können wir unsere Daten in die Datenbank einfügen.

Wir verwenden die PHP-Funktion mysql_num_rows(), um herauszufinden, wie viele Datensätze die Abfrage zurückgegeben hat. Alles, was wir tun müssen, ist, ihm die Ressource zu übergeben, die wir in einer Variablen namens $existingSignup gespeichert haben, und es wird eine Zahl zurückgegeben. Wir verwenden dann eine if-Anweisung, um zu überprüfen, ob die Zahl kleiner als 1 ist.

Schritt 9: In die Datenbank einfügen

Wir haben überprüft, dass unsere Daten in die Datenbank aufgenommen werden können, daher verwenden wir den folgenden Code:

$date = date('Y-m-d');
$time = date('H:i:s');

$insertSignup = mysql_query("INSERT INTO signups (signup_email_address, signup_date, signup_time) VALUES ('$email','$date','$time')");
if($insertSignup){
    $status = 'success';
    $message = 'you have been signed up!';	
}
else {
    $status = 'error';
    $message = 'Oops, there's been a technical error! You have not been signed up.';	
}

Die Datums- und Zeitvariablen sind PHP-Funktionen, die Datum und Uhrzeit in einem bestimmten Format zurückgeben. Da wir das Feld signup_date in der Datenbank als Datumsfeld und das Feld signup_time als Zeitfeld festlegen, formatiere ich Datum und Uhrzeit entsprechend. Als nächstes müssen Sie die Daten in die Datenbank einfügen. Dies geschieht wiederum, indem die Funktion mysql_query() verwendet und eine SQL-Anweisung übergeben wird. Da es sich um eine INSERT-SQL-Anweisung handelt, gibt die Funktion bei Erfolg true und bei Fehlschlagen false zurück. Es wird keine Ressource zurückgegeben, da keine Ressource zurückgegeben werden muss, weil wir gerade eine Anweisung ausgeführt haben. Wir prüfen dann, ob die Abfrage erfolgreich war oder nicht. Wenn ja, setzen wir unsere $status-Variable auf 'Erfolg' und unsere $message-Variable auf 'Sie wurden angemeldet!'. Andernfalls, wenn die Abfrage fehlgeschlagen ist, setzen wir $status auf 'error' und $message auf 'Ups, es ist ein technischer Fehler aufgetreten! Sie wurden nicht angemeldet.' Wir müssen dem Benutzer nicht den Fehler mitteilen, sondern nur, dass ein Problem aufgetreten ist und er sich nicht angemeldet hat. Dadurch werden auch alle Fehler abgefangen, die durch den anfänglichen Verbindungscode verursacht werden (z. B. konnte keine Verbindung zur Datenbank hergestellt werden oder konnte keine Tabelle finden usw.).

Schritt 10: Senden Sie die Antwort zurück

Im vorherigen Schritt wurden zwei Variablen definiert: $status und $message. Dies sind die Daten, die wir als JSON codieren möchten, um sie an den Benutzer zurückzusenden. Wir werden diese beiden Variablen in ein assoziatives Array einfügen, damit wir den Schlüsseln der JSON-Mitglieder aussagekräftige Namen geben können.

1	$data = array(
2	'status' => $status,
3	'message' => $message
4	);

Sie müssen Ihr assoziatives Array nicht so schreiben; obwohl es mir persönlich leichter fällt zu lesen. Alles, was wir jetzt tun müssen, ist dieses Array an eine PHP-Funktion namens json_encode() zu übergeben. Dies verwandelt unser assoziatives Array in eine gut formatierte JSON-Zeichenfolge. Sobald es als JSON codiert wurde, müssen wir es an den Browser des Clients zurückgeben. Wir tun dies mit einer einfachen echo-Anweisung.

1	echo json_encode($data);

Und das ist es. Das ist der gesamte serverseitige Code, der benötigt wird. Damit hättest du enden sollen:

if($_GET['action'] == 'signup'){
    mysql_connect('localhost','YOUR DB USERNAME','YOUR DB PASSWORD');  
    mysql_select_db('YOUR DATABASE THAT CONTAINS THE SIGNUPS TABLE');

    //sanitize data
    $email = mysql_real_escape_string($_POST['signup-email']);

    //validate email address - check if input was empty
    if(empty($email)){
        $status = "error";
        $message = "You did not enter an email address!";
    }
    else if(!preg_match('/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/', $email)){ //validate email address - check if is a valid email address
        $status = "error";
        $message = "You have entered an invalid email address!";
    }
    else {
       $existingSignup = mysql_query("SELECT * FROM signups WHERE signup_email_address='$email'");   
       if(mysql_num_rows($existingSignup) < 1){

           $date = date('Y-m-d');
           $time = date('H:i:s');

           $insertSignup = mysql_query("INSERT INTO signups (signup_email_address, signup_date, signup_time) VALUES ('$email','$date','$time')");
           if($insertSignup){
               $status = "success";
               $message = "You have been signed up!";	
           }
           else {
               $status = "error";
               $message = "Ooops, Theres been a technical error!";	
           }
        }
        else {
            $status = "error";
            $message = "This email address has already been registered!";
        }
    }

    //return json response 
    $data = array(
        'status' => $status,
        'message' => $message
    );

    echo json_encode($data);

    exit;
}

Das ist der gesamte Code, den wir benötigen, damit das E-Mail-Anmeldeformular funktioniert. Wenn Sie dieses Tutorial Schritt für Schritt befolgt haben, sollten Sie hoffentlich jetzt E-Mail-Anmeldungen aufzeichnen. Obwohl unser Code funktioniert und unser Formular das tut, was es sollte, gibt es eine letzte Sache, die das Formular verbessern wird.

Wenn der Benutzer mehr als einmal auf die Schaltfläche zum Senden klickt, bevor der AJAX-Aufruf beendet ist, werden wir einige ziemlich seltsame Ergebnisse erhalten. Der Nachrichtenergebnishalter wird ein- und wieder ausgeblendet, aber das Timeout wird nicht zurückgesetzt. Dies sieht dumm aus und verursacht unnötige Aufrufe an den Server. Wirklich, wir sollten den Benutzer daran hindern, das Formular abzusenden, während eine Übermittlung gerade läuft.

Schritt 11: Mehrere Formularübermittlungen stoppen

Das Stoppen mehrerer Formulareinsendungen ist eigentlich ziemlich einfach. Wir müssen lediglich den Status des Formulars beim Absenden prüfen. Wenn es gerade gesendet wird, möchten wir das Formular nicht erneut senden, bis es fertig ist. Dazu speichern wir den Status des Formulars im Formular mit der Funktion data() von jQuery. Mit dieser Funktion können wir beliebige Daten, die mit dem übereinstimmenden Element verknüpft sind, im Schlüsselwertformat speichern und abrufen. Wir verwenden einen Schlüssel namens 'formstatus' und sein Wert ist entweder 'submitting' oder 'idle'. Wenn 'formstatus' gleich 'submitting' ist, wird das Formular nicht gesendet. Wenn es gleich 'idle' ist, wird es übergeben. Sobald das Formular gesendet wurde, müssen wir 'formstatus' auf 'submitting' setzen. Und wenn das Senden abgeschlossen ist, setzen wir 'formstatus' auf 'idle'. Hier ist unser letztes JavaScript.

$(document).ready(function(){
    $('#newsletter-signup').submit(function(){

    //check the form is not currently submitting
    if($(this).data('formstatus') !== 'submitting'){

         //setup variables
         var form = $(this),
         formData = form.serialize(),
         formUrl = form.attr('action'),
         formMethod = form.attr('method'), 
         responseMsg = $('#signup-response');

         //add status data to form
         form.data('formstatus','submitting');

         //show response message - waiting
         responseMsg.hide()
                    .addClass('response-waiting')
                    .text('Please Wait...')
                    .fadeIn(200);

         //send data to server for validation
         $.ajax({
             url: formUrl,
             type: formMethod,
             data: formData,
             success:function(data){

                //setup variables
                var responseData = jQuery.parseJSON(data), 
                    klass = '';

                //response conditional
                switch(responseData.status){
                    case 'error':
                        klass = 'response-error';
                    break;
                    case 'success':
                        klass = 'response-success';
                    break;	
                }

                //show reponse message
                responseMsg.fadeOut(200,function(){
                   $(this).removeClass('response-waiting')
                          .addClass(klass)
                          .text(responseData.message)
                          .fadeIn(200,function(){
                              //set timeout to hide response message
                              setTimeout(function(){
                                  responseMsg.fadeOut(200,function(){
                                      $(this).removeClass(klass);
                                      form.data('formstatus','idle');
                                  });
                               },3000)
                           });
                });
           }
      });
    }

    //prevent form from submitting
    return false;
    
    });
})

Abschluss

Hoffentlich können Sie die in diesem Tutorial erlernten Techniken anwenden, um in Zukunft komplexere Projekte zu erstellen. Vielen Dank fürs Lesen. Wenn Sie Fragen oder Kommentare haben, zögern Sie nicht, unten einen Kommentar zu hinterlassen.