Kartenbindung-Funktion implementieren

Einführung

In diesem Projekt lernst du, wie du eine Kartenbindung implementierst, indem du jQuery und AJAX verwendest. Dieses Projekt ist so konzipiert, dass es dir hilft, die Grundlagen der Daten-Dynamisierung zu verstehen, was eine entscheidende Fähigkeit in der Front-End-Entwicklung ist.

👀 Vorschau

Die erfolgreichen Ergebnisse sind wie folgt:

Die Fehlschlag-Effekte sind wie folgt:

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die ajax-Funktion von jQuery verwendest, um Daten aus einer JSON-Datei abzurufen
• Wie du die Benutzereingabe mit den abgerufen Karten-Daten vergleichst
• Wie du basierend auf dem Vergleich Erfolg- oder Fehlermeldungen anzeigt

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Eine Kartenbindung mit jQuery und AJAX zu implementieren
• Die Grundlagen der Daten-Dynamisierung zu verstehen, eine entscheidende Fähigkeit in der Front-End-Entwicklung
• AJAX-Anfragen zu stellen, um Daten von einem Server abzurufen
• Die DOM mit jQuery zu manipulieren, um dynamischen Inhalt anzuzeigen
• Bootstrap-Klassen verwenden, um das Anzeigen und Ausblenden von Alerts zu steuern

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -Struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

├── index.html ## Kartenbindung-Seite
├── bootstrap.min.css ## Bootstrap-Datei
├── js
├───────cardnolist.json  ## JSON-Datei
├───────index.js ## JavaScript-Datei mit zu vervollständigendem Code
├───────jquery-3.6.0.min.js ## jQuery-Datei

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben in der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Kartendaten abrufen

In diesem Schritt wirst du lernen, wie du die ajax-Funktion von jQuery verwendest, um die Karten-Daten aus der Datei js/cardnolist.json abzurufen.

1. Öffne die Datei js/index.js.
2. Füge innerhalb der bind-Funktion folgenden Code hinzu, um eine AJAX-Anfrage an die Datei cardnolist.json zu stellen:

function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // Die Karten-Daten sind jetzt in der Variable 'data' verfügbar
    console.log(data);
  });
}

Dieser Code wird eine AJAX-Anfrage an die Datei js/cardnolist.json stellen.

Kartenbindung-Funktion implementieren

In diesem Schritt wirst du die Kartenbindung-Funktion implementieren, um die Benutzereingabe mit den abgerufen Karten-Daten zu vergleichen.

1. Öffne die Datei js/index.js und suche die Funktion bind(cardno, password).
2. Ersetze den Kommentar // TODO durch folgenden Code:

$.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");
  }
});

Dieser Code ruft die Karten-Daten aus der JSON-Datei ab, überprüft, ob die Benutzereingabe mit einer der Kartennummern und Passwörter übereinstimmt, und zeigt dann die entsprechende Erfolg- oder Fehlermeldung mit Hilfe von Bootstrap-Klassen an.

Kartenbindung-Funktion testen

1. Speichere die Datei js/index.js und aktualisiere die Seite index.html in deinem Browser.
2. Gib eine gültige Kartennummer und ein Passwort ein (z.B. "001431562123561238" und "123456") und klicke auf die Schaltfläche "submit".
   • Du solltest die Erfolgsmeldung angezeigt sehen.

3. Gib eine ungültige Kartennummer und ein Passwort ein und klicke auf die Schaltfläche "submit".
   • Du solltest die Fehlermeldung angezeigt sehen.

Herzlichen Glückwunsch! Du hast die Kartenbindung-Funktion erfolgreich implementiert.

Zusammenfassung

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