Implémenter la fonction de liaison de carte

Introduction

Dans ce projet, vous allez apprendre à implémenter une fonction de liaison de carte à l'aide de jQuery et d'AJAX. Ce projet est conçu pour vous aider à comprendre les bases de la dynamisation des données, qui est une compétence cruciale en développement front-end.

👀 Aperçu

Les résultats réussis sont les suivants :

Les effets de défaillance sont les suivants :

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment utiliser la fonction ajax de jQuery pour récupérer des données à partir d'un fichier JSON
• Comment comparer l'entrée de l'utilisateur avec les données de carte récupérées
• Comment afficher des messages de succès ou d'échec en fonction de la comparaison

🏆 Réalisations

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

• Implémenter une fonction de liaison de carte à l'aide de jQuery et d'AJAX
• Comprendre les bases de la dynamisation des données, une compétence cruciale en développement front-end
• Effectuer des requêtes AJAX pour récupérer des données à partir d'un serveur
• Manipuler le DOM à l'aide de jQuery pour afficher du contenu dynamique
• Utiliser les classes Bootstrap pour contrôler l'affichage et la dissimulation d'alertes

Skills Graph

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── index.html ## Page de liaison de carte
├── bootstrap.min.css ## Fichier Bootstrap
├── js
├───────cardnolist.json  ## Fichier JSON
├───────index.js ## Fichier JavaScript avec le code à compléter
├───────jquery-3.6.0.min.js ## Fichier jQuery

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Récupérer les données de la carte

Dans cette étape, vous allez apprendre à utiliser la fonction ajax de jQuery pour récupérer les données de la carte à partir du fichier js/cardnolist.json.

1. Ouvrez le fichier js/index.js.
2. Dans la fonction bind, ajoutez le code suivant pour effectuer une requête AJAX vers le fichier cardnolist.json :

function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // Les données de la carte sont désormais disponibles dans la variable 'data'
    console.log(data);
  });
}

Ce code effectuera une requête AJAX vers le fichier js/cardnolist.json.

Implémenter la fonction de liaison de carte

Dans cette étape, vous allez implémenter la fonction de liaison de carte pour comparer l'entrée de l'utilisateur avec les données de carte récupérées.

1. Dans le fichier js/index.js, trouvez la fonction bind(cardno, password).
2. Remplacez le commentaire // TODO par le code suivant :

$.get("js/cardnolist.json", (data) => {
  let flag = data.cardnolist.some(
    (value) => value.cardno == cardno && value.password == password
  );
  if (flag) {
    $("#tip1").removeClass("fade").addClass("show");
    $("#tip2").removeClass("show").addClass("fade");
  } else {
    $("#tip2").removeClass("fade").addClass("show");
    $("#tip1").removeClass("show").addClass("fade");
  }
});

Ce code récupère les données de carte à partir du fichier JSON, vérifie si l'entrée de l'utilisateur correspond à l'un des numéros de carte et mots de passe, puis affiche le message de succès ou d'échec approprié en utilisant les classes Bootstrap.

Tester la fonction de liaison de carte

1. Enregistrez le fichier js/index.js et rafraîchissez la page index.html dans votre navigateur.

2. Entrez un numéro de carte et un mot de passe valides (par exemple, "001431562123561238" et "123456") et cliquez sur le bouton "submit".

   • Vous devriez voir le message de succès s'afficher.

3. Entrez un numéro de carte et un mot de passe invalides et cliquez sur le bouton "submit".

   • Vous devriez voir le message d'échec s'afficher.

Félicitations! Vous avez implémenté avec succès la fonction de liaison de carte.

Sommaire

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