Implémenter la vérification de connexion avec AJAX et JSON

Introduction

Dans ce projet, vous allez apprendre à implémenter une fonction de vérification de connexion en utilisant AJAX et le transfert de données JSON. Le projet consiste à créer un formulaire de connexion, à gérer la soumission du formulaire avec AJAX et à valider les informations d'identification de l'utilisateur côté serveur.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment préparer l'environnement du projet et configurer les fichiers et dépendances nécessaires.
Comment implémenter le formulaire de connexion dans la page AjaxJson.jsp à l'aide de HTML.
Comment gérer la soumission du formulaire de connexion à l'aide de jQuery et AJAX.
Comment encapsuler les données de connexion au format JSON et les envoyer au serveur.
Comment recevoir et traiter la réponse JSON du serveur pour déterminer l'état de connexion.
Comment rediriger l'utilisateur vers la page appropriée en fonction du résultat de la connexion.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser AJAX pour envoyer des données au serveur sans rafraîchir complètement la page.
Travailler avec le format de données JSON pour le transfert de données entre le client et le serveur.
Gérer la soumission du formulaire et la validation des entrées de l'utilisateur côté client.
Traiter la réponse du serveur et mettre à jour l'interface utilisateur en conséquence.
Intégrer les composants côté client et côté serveur pour créer une fonction de vérification de connexion complète.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/NetworkingGroup(["Networking"]) javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/NetworkingGroup -.-> javascript/http_req("HTTP Requests") javascript/NetworkingGroup -.-> javascript/json("JSON") subgraph Lab Skills javascript/dom_manip -.-> lab-300378{{"Transfert de données JSON avec AJAX"}} javascript/event_handle -.-> lab-300378{{"Transfert de données JSON avec AJAX"}} javascript/http_req -.-> lab-300378{{"Transfert de données JSON avec AJAX"}} javascript/json -.-> lab-300378{{"Transfert de données JSON avec AJAX"}} end

Préparer l'environnement du projet

Dans cette étape, vous allez apprendre à préparer l'environnement du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez l'environnement de laboratoire et accédez au répertoire AjaxJsonProject en utilisant la commande suivante :
```
cd AjaxJsonProject/AjaxJsonProject
```
Démarrez le serveur Tomcat avec la commande suivante :
```
mvn tomcat7:run
```
Basculez vers l'onglet Web 8080 au-dessus de l'environnement pour voir le projet en cours d'exécution.

Implémenter le formulaire de connexion

Dans cette étape, vous allez apprendre à implémenter le formulaire de connexion dans la page AjaxJson.jsp. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le fichier AjaxJson.jsp dans le répertoire AjaxJsonProject/AjaxJsonProject/src/main/webapp.

Ajoutez le code HTML suivant pour créer le formulaire de connexion :

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

        <label for="userPwd">Mot de passe :</label>
        <input type="password" id="userPwd" name="userPwd"><br><br>

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

Incluez la bibliothèque jQuery en ajoutant la balise de script suivante dans la section <head> :
```
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
```

Gérer la soumission du formulaire de connexion avec AJAX

Dans cette étape, vous allez apprendre à gérer la soumission du formulaire de connexion à l'aide d'AJAX. Suivez les étapes ci-dessous pour terminer cette étape :

Ajoutez le code JavaScript suivant à l'intérieur des balises <script> dans le fichier AjaxJson.jsp :

<script>
    $(document).ready(function(){
        $("#loginForm").submit(function(event){
            // Empêcher le comportement de soumission du formulaire par défaut
            event.preventDefault();

            // Obtenir le nom d'utilisateur et le mot de passe entrés
            var $userName = $("#userName").val();
            var $userPwd = $("#userPwd").val();

            // Vérifier si le nom d'utilisateur et le mot de passe sont vides
            if($userName.trim() === "" || $userPwd.trim() === ""){
                alert("Le nom d'utilisateur et le mot de passe ne peuvent pas être vides");
                return;
            }

            // Encapsuler les données à envoyer au format JSON
            var data = {
                "u_name": $userName,
                "u_pwd": $userPwd
            };

            // Envoyer une requête AJAX
            $.ajax({
                type: "POST",
                url: "/AJAXJSONLoginServlet",
                contentType: "application/json",
                data: JSON.stringify(data),
                dataType: "json",
                success: function(response){
                    // Vérifier si la connexion a réussi en fonction des données renvoyées
                    if(response.code === 200){
                        alert("Connexion réussie");
                        // Rediriger vers index.jsp après une connexion réussie
                        window.location.href = "index.jsp";
                    } else {
                        alert("Nom d'utilisateur ou mot de passe incorrect");
                    }
                },
                error: function(xhr, status, error){
                    console.error("La requête AJAX a échoué : " + status + ", " + error);
                }
            });
        });
    });
</script>

Ce code gère la soumission du formulaire en empêchant le comportement du formulaire par défaut, en obtenant le nom d'utilisateur et le mot de passe entrés et en envoyant une requête AJAX à l'endpoint /AJAXJSONLoginServlet.
Le backend renverra une réponse JSON avec une propriété code. Si le code est 200, la connexion est réussie et l'utilisateur est redirigé vers la page index.jsp. Si le code n'est pas 200, la connexion a échoué et un message d'erreur est affiché.

Tester la fonctionnalité de connexion

Lancez le serveur Tomcat avec la commande mvn tomcat7:run s'il n'est pas déjà en cours d'exécution.
Ouvrez l'onglet Web 8080 au-dessus de l'environnement pour voir le projet en action. Lorsque vous exécutez à nouveau, vous devrez actualiser.
Entrez un nom d'utilisateur et un mot de passe valides, puis cliquez sur le bouton "Connexion".
Si la connexion réussit, vous devriez voir un message d'alerte "Connexion réussie" et être redirigé vers la page index.jsp.
Si la connexion échoue, vous devriez voir un message d'alerte "Nom d'utilisateur ou mot de passe incorrect".

Félicitations! Vous avez réussi à implémenter la fonction de vérification de connexion en utilisant AJAX et le transfert de données JSON.

✨ Vérifier la solution et pratiquer

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.