jQuery と AJAX を使ってカードバインド機能を実装する

はじめに

このプロジェクトでは、jQuery と AJAX を使ってカードバインド機能を実装する方法を学びます。このプロジェクトは、フロントエンド開発における重要なスキルであるデータの動的化の基本を理解するのに役立ちます。

👀 プレビュー

成功した結果は以下の通りです。

成功したカードバインド結果

失敗した場合のエフェクトは以下の通りです。

カードバインド失敗メッセージ

🎯 タスク

このプロジェクトでは、以下のことを学びます。

jQuery のajax関数を使って JSON ファイルからデータを取得する方法
ユーザー入力と取得したカードデータを比較する方法
比較結果に基づいて成功または失敗のメッセージを表示する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

jQuery と AJAX を使ってカードバインド機能を実装する
フロントエンド開発における重要なスキルであるデータの動的化の基本を理解する
サーバーからデータを取得するための AJAX リクエストを行う
jQuery を使って DOM を操作して動的なコンテンツを表示する
Bootstrap クラスを使ってアラートの表示と非表示を制御する

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── index.html ## カードバインドページ
├── bootstrap.min.css ## Bootstrap ファイル
├── js
├───────cardnolist.json  ## JSON ファイル
├───────index.js ## 完成させるコードが記載された JavaScript ファイル
├───────jquery-3.6.0.min.js ## jQuery ファイル

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

カードデータを取得する

このステップでは、jQuery のajax関数を使ってjs/cardnolist.jsonファイルからカードデータを取得する方法を学びます。

js/index.jsファイルを開きます。
bind関数の中に、以下のコードを追加してcardnolist.jsonファイルに対して AJAX リクエストを行います。

function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // カードデータは現在 'data' 変数に格納されています
    console.log(data);
  });
}

このコードはjs/cardnolist.jsonファイルに対して AJAX リクエストを行います。

カードバインド機能を実装する

このステップでは、カードバインド機能を実装して、ユーザーの入力と取得したカードデータを比較します。

js/index.jsファイルの中で、bind(cardno, password)関数を探します。
// TODOのコメントを以下のコードに置き換えます。

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

このコードは JSON ファイルからカードデータを取得し、ユーザーの入力がカード番号とパスワードのいずれかと一致するかどうかを確認し、その後 Bootstrap クラスを使用して適切な成功または失敗のメッセージを表示します。

カードバインド機能をテストする

js/index.jsファイルを保存し、ブラウザでindex.htmlページを更新します。
有効なカード番号とパスワード（例：「001431562123561238」と「123456」）を入力し、「submit」ボタンをクリックします。
- 成功メッセージが表示されるはずです。

表示された成功メッセージ

無効なカード番号とパスワードを入力し、「submit」ボタンをクリックします。
- 失敗メッセージが表示されるはずです。

失敗時のエラーメッセージ

おめでとうございます！カードバインド機能を正常に実装しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。