Реализация функции привязки карты

Введение

В этом проекте вы научитесь реализовывать функцию привязки карты с использованием jQuery и AJAX. Этот проект предназначен для того, чтобы помочь вам понять основы динамизации данных, что является важным навыком в фронтенд-разработке.

👀 Предварительный просмотр

Успешные результаты выглядят следующим образом:

Эффекты неудачи выглядят следующим образом:

🎯 Задачи

В этом проекте вы научитесь:

• Как использовать функцию ajax jQuery для получения данных из JSON-файла
• Как сравнивать ввод пользователя с полученными данными карты
• Как отображать сообщения об успехе или неудаче на основе сравнения

🏆 Достижения

После завершения этого проекта вы сможете:

• Реализовать функцию привязки карты с использованием jQuery и AJAX
• Разобраться в основах динамизации данных, важном навыке в фронтенд-разработке
• Отправлять AJAX-запросы для получения данных с сервера
• Управлять DOM с использованием jQuery для отображения динамического контента
• Использовать классы Bootstrap для управления отображением и скрытием предупреждений

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов выглядит следующим образом:

├── index.html ## Страница привязки карты
├── bootstrap.min.css ## Файл Bootstrap
├── js
├───────cardnolist.json  ## JSON-файл
├───────index.js ## JavaScript-файл с кодом, который необходимо завершить
├───────jquery-3.6.0.min.js ## Файл jQuery

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, и вы увидите страницу.

Получение данных о карте

В этом шаге вы научитесь использовать функцию ajax jQuery для получения данных карты из файла js/cardnolist.json.

1. Откройте файл js/index.js.
2. Внутри функции bind добавьте следующий код, чтобы отправить AJAX-запрос к файлу cardnolist.json:

function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // Теперь данные карты доступны в переменной 'data'
    console.log(data);
  });
}

Этот код отправит AJAX-запрос к файлу js/cardnolist.json.

Реализовать функцию привязки карты

В этом шаге вы реализуете функцию привязки карты для сравнения ввода пользователя с полученными данными карты.

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") и нажмите кнопку "submit".
   • Вы должны увидеть отображенное сообщение об успехе.

3. Введите недействительный номер карты и пароль и нажмите кнопку "submit".
   • Вы должны увидеть отображенное сообщение об ошибке.

Поздравляем! Вы успешно реализовали функцию привязки карты.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.