实现卡片绑定功能

jQueryjQueryBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何使用 jQuery 和 AJAX 实现卡片绑定功能。这个项目旨在帮助你理解数据动态化的基础知识,这是前端开发中的一项关键技能。

👀 预览

成功结果如下:

成功的卡片绑定结果

失败效果如下:

卡片绑定失败消息

🎯 任务

在这个项目中,你将学习:

  • 如何使用 jQuery 的 ajax 函数从 JSON 文件中检索数据
  • 如何将用户输入与检索到的卡片数据进行比较
  • 如何根据比较结果显示成功或失败消息

🏆 成果

完成这个项目后,你将能够:

  • 使用 jQuery 和 AJAX 实现卡片绑定功能
  • 理解数据动态化的基础知识,这是前端开发中的一项关键技能
  • 发送 AJAX 请求从服务器检索数据
  • 使用 jQuery 操作 DOM 以显示动态内容
  • 使用 Bootstrap 类控制警报的显示和隐藏

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL jquery(("`jQuery`")) -.-> jquery/EventHandlingGroup(["`Event Handling`"]) jquery(("`jQuery`")) -.-> jquery/DOMManipulationGroup(["`DOM Manipulation`"]) jquery(("`jQuery`")) -.-> jquery/DataHandlingGroup(["`Data Handling`"]) jquery/EventHandlingGroup -.-> jquery/event_methods("`Event Methods`") jquery/EventHandlingGroup -.-> jquery/event_effects("`Event Effects`") jquery/DOMManipulationGroup -.-> jquery/dom_traversal("`DOM Traversal`") jquery/DOMManipulationGroup -.-> jquery/element_management("`Element Creation and Removal`") jquery/DataHandlingGroup -.-> jquery/ajax("`AJAX Calls`") subgraph Lab Skills jquery/event_methods -.-> lab-445662{{"`实现卡片绑定功能`"}} jquery/event_effects -.-> lab-445662{{"`实现卡片绑定功能`"}} jquery/dom_traversal -.-> lab-445662{{"`实现卡片绑定功能`"}} jquery/element_management -.-> lab-445662{{"`实现卡片绑定功能`"}} jquery/ajax -.-> lab-445662{{"`实现卡片绑定功能`"}} end

设置项目结构

在这一步中,你将设置项目文件和结构。按照以下步骤完成此步骤:

打开项目文件夹。目录结构如下:

├── 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 文件中检索卡片数据。

  1. 打开 js/index.js 文件。
  2. bind 函数内部,添加以下代码以向 cardnolist.json 文件发送 AJAX 请求:
function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // 卡片数据现在可在 'data' 变量中获取
    console.log(data);
  });
}

这段代码将向 js/cardnolist.json 文件发送 AJAX 请求。

实现卡片绑定功能

在这一步中,你将实现卡片绑定功能,以便将用户输入与检索到的卡片数据进行比较。

  1. js/index.js 文件中,找到 bind(cardno, password) 函数。
  2. // 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 类显示相应的成功或失败消息。

测试卡片绑定功能

  1. 保存 js/index.js 文件,然后在浏览器中刷新 index.html 页面。

  2. 输入有效的卡号和密码(例如,“001431562123561238” 和 “123456”),然后点击 “提交” 按钮。

    • 你应该会看到显示成功消息。
显示成功消息
  1. 输入无效的卡号和密码,然后点击 “提交” 按钮。

    • 你应该会看到显示失败消息。
失败时的错误消息

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

✨ 查看解决方案并练习

总结

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

您可能感兴趣的其他 jQuery 教程