Anmeldeverifizierung mit AJAX und JSON implementieren

Einführung

In diesem Projekt lernst du, wie du eine Anmeldeverifizierungsfunktion mit AJAX und JSON-Datenaustausch implementierst. Das Projekt beinhaltet das Erstellen eines Anmeldeformulars, das Bearbeiten der Formularübermittlung mit AJAX und die Validierung der Anmeldeinformationen des Benutzers auf der Serverseite.

👀 Vorschau

Vorschau des Anmeldeformulars gif

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Projektumgebung vorbereitest und die erforderlichen Dateien und Abhängigkeiten einrichtest.
Wie du das Anmeldeformular in der AjaxJson.jsp-Seite mit HTML implementierst.
Wie du die Anmeldeformularübermittlung mit jQuery und AJAX bearbeitest.
Wie du die Anmeldedaten im JSON-Format kapselst und an den Server sendest.
Wie du die JSON-Antwort vom Server empfängst und verarbeitest, um den Anmeldestatus zu bestimmen.
Wie du den Benutzer basierend auf dem Anmeldeprodukt auf die entsprechende Seite umleitest.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

AJAX zum Senden von Daten an den Server ohne volle Seitenaktualisierung zu verwenden.
Mit dem JSON-Datenformat für den Datenaustausch zwischen Client und Server umzugehen.
Die Formularübermittlung und die Validierung von Benutzereingaben auf der Clientseite zu bearbeiten.
Die Serverantwort zu verarbeiten und die Benutzeroberfläche entsprechend zu aktualisieren.
Client- und Serverkomponenten zu integrieren, um eine vollständige Anmeldeverifizierungsfunktion zu erstellen.

Projektumgebung vorbereiten

In diesem Schritt lernst du, wie du die Projektsumgebung vorbereitest. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Lab-Umgebung und navigiere zum Verzeichnis AjaxJsonProject mit dem folgenden Befehl:
```
cd AjaxJsonProject/AjaxJsonProject
```
Starte den Tomcat-Server mit dem folgenden Befehl:
```
mvn tomcat7:run
```
Wechsel zu der Registerkarte Web 8080 über der Umgebung, um das Projekt im Betrieb zu sehen.

Anmeldeformular implementieren

In diesem Schritt lernst du, wie du das Anmeldeformular in der AjaxJson.jsp-Seite implementierst. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei AjaxJson.jsp im Verzeichnis AjaxJsonProject/AjaxJsonProject/src/main/webapp.

Füge den folgenden HTML-Code hinzu, um das Anmeldeformular zu erstellen:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Anmeldeformular</title>
</head>
<body>
    <h2>Anmeldeformular</h2>
    <form id="loginForm">
        <label for="userName">Benutzername:</label>
        <input type="text" id="userName" name="userName"><br><br>

        <label for="userPwd">Kennwort:</label>
        <input type="password" id="userPwd" name="userPwd"><br><br>

        <input type="submit" value="Anmelden">
    </form>
</body>
</html>

Füge die jQuery-Bibliothek hinzu, indem du das folgende Skript-Tag im <head>-Abschnitt hinzufügst:
```
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
```

Behandle die Anmeldeformularübermittlung mit AJAX

In diesem Schritt lernst du, wie du die Anmeldeformularübermittlung mit AJAX bearbeitest. Folge den Schritten unten, um diesen Schritt abzuschließen:

Füge den folgenden JavaScript-Code innerhalb der <script>-Tags in der AjaxJson.jsp-Datei hinzu:

<script>
    $(document).ready(function(){
        $("#loginForm").submit(function(event){
            // Verhindere das standardmäßige Formularübermittlungsverhalten
            event.preventDefault();

            // Hole den eingegebenen Benutzernamen und das Kennwort
            var $userName = $("#userName").val();
            var $userPwd = $("#userPwd").val();

            // Überprüfe, ob der Benutzername und das Kennwort leer sind
            if($userName.trim() === "" || $userPwd.trim() === ""){
                alert("Benutzername und Kennwort dürfen nicht leer sein");
                return;
            }

            // Kapsele die zu sendenden Daten im JSON-Format
            var data = {
                "u_name": $userName,
                "u_pwd": $userPwd
            };

            // Sende einen AJAX-Anfrage
            $.ajax({
                type: "POST",
                url: "/AJAXJSONLoginServlet",
                contentType: "application/json",
                data: JSON.stringify(data),
                dataType: "json",
                success: function(response){
                    // Überprüfe, ob die Anmeldung erfolgreich war, basierend auf den zurückgegebenen Daten
                    if(response.code === 200){
                        alert("Anmeldung erfolgreich");
                        // Leite nach erfolgreicher Anmeldung zu index.jsp um
                        window.location.href = "index.jsp";
                    } else {
                        alert("Falscher Benutzername oder Kennwort");
                    }
                },
                error: function(xhr, status, error){
                    console.error("AJAX-Anfrage fehlgeschlagen: " + status + ", " + error);
                }
            });
        });
    });
</script>

Dieser Code behandelt die Formularübermittlung, indem er das standardmäßige Formularverhalten verhindert, den eingegebenen Benutzernamen und das Kennwort erhält und eine AJAX-Anfrage an den Endpunkt /AJAXJSONLoginServlet sendet.
Der Backend wird eine JSON-Antwort mit einer code-Eigenschaft zurückgeben. Wenn der Code 200 ist, war die Anmeldung erfolgreich, und der Benutzer wird zur index.jsp-Seite umgeleitet. Wenn der Code nicht 200 ist, ist die Anmeldung fehlgeschlagen, und eine Fehlermeldung wird angezeigt.

Teste die Anmeldefunktionalität

Starte den Tomcat-Server mit dem Befehl mvn tomcat7:run, wenn er nicht bereits läuft.
Öffne die Registerkarte Web 8080 über der Umgebung, um das Projekt in Aktion zu sehen. Beim erneuten Ausführen musst du aktualisieren.
Gib einen gültigen Benutzernamen und ein Kennwort ein, und klicke dann auf die Schaltfläche "Anmelden".
Wenn die Anmeldung erfolgreich ist, solltest du eine Popup-Nachricht "Anmeldung erfolgreich" sehen und zur index.jsp-Seite umgeleitet werden.
Wenn die Anmeldung fehlschlägt, solltest du eine Popup-Nachricht "Falscher Benutzername oder Kennwort" sehen.

Herzlichen Glückwunsch! Du hast die Anmeldeverifizierungsfunktion erfolgreich mit AJAX und JSON-Datenaustausch implementiert.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labore absolvieren, um deine Fähigkeiten zu verbessern.

JSON-Datenaustausch mit AJAX