使用 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 按钮来运行项目。

接下来，在虚拟机顶部打开“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”），然后点击“提交”按钮。
- 你应该会看到显示成功消息。

显示成功消息

输入无效的卡号和密码，然后点击“提交”按钮。
- 你应该会看到显示失败消息。

失败时的错误消息

恭喜！你已成功实现卡片绑定功能。

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。