Implementar la función de enlace de tarjeta

Introducción

En este proyecto, aprenderás cómo implementar una función de enlace de tarjeta utilizando jQuery y AJAX. Este proyecto está diseñado para ayudarte a comprender los conceptos básicos de la dinamización de datos, una habilidad fundamental en el desarrollo front-end.

👀 Vista previa

Los resultados exitosos son los siguientes:

Los efectos de error son los siguientes:

🎯 Tareas

En este proyecto, aprenderás:

• Cómo utilizar la función ajax de jQuery para recuperar datos de un archivo JSON
• Cómo comparar la entrada del usuario con los datos de la tarjeta recuperados
• Cómo mostrar mensajes de éxito o error basados en la comparación

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Implementar una función de enlace de tarjeta utilizando jQuery y AJAX
• Comprender los conceptos básicos de la dinamización de datos, una habilidad fundamental en el desarrollo front-end
• Realizar solicitudes AJAX para recuperar datos de un servidor
• Manipular el DOM utilizando jQuery para mostrar contenido dinámico
• Utilizar clases de Bootstrap para controlar la visualización y el ocultamiento de alertas

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── index.html ## Página de enlace de tarjeta
├── bootstrap.min.css ## Archivo de Bootstrap
├── js
├───────cardnolist.json  ## Archivo JSON
├───────index.js ## Archivo JavaScript con el código que se debe completar
├───────jquery-3.6.0.min.js ## Archivo de jQuery

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Recuperar datos de la tarjeta

En este paso, aprenderás cómo utilizar la función ajax de jQuery para recuperar los datos de la tarjeta del archivo js/cardnolist.json.

1. Abre el archivo js/index.js.
2. Dentro de la función bind, agrega el siguiente código para realizar una solicitud AJAX al archivo cardnolist.json:

function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // Los datos de la tarjeta ahora están disponibles en la variable 'data'
    console.log(data);
  });
}

Este código realizará una solicitud AJAX al archivo js/cardnolist.json.

Implementar la función de enlace de tarjeta

En este paso, implementarás la función de enlace de tarjeta para comparar la entrada del usuario con los datos de la tarjeta recuperados.

1. Dentro del archivo js/index.js, encuentra la función bind(cardno, password).
2. Reemplaza el comentario // TODO con el siguiente código:

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

Este código recupera los datos de la tarjeta del archivo JSON, verifica si la entrada del usuario coincide con alguno de los números de tarjeta y contraseñas, y luego muestra el mensaje de éxito o error adecuado utilizando las clases de Bootstrap.

Probar la función de enlace de tarjeta

1. Guarda el archivo js/index.js y actualiza la página index.html en tu navegador.
2. Ingresa un número de tarjeta y contraseña válidos (por ejemplo, "001431562123561238" y "123456") y haz clic en el botón "submit".
   • Deberías ver el mensaje de éxito mostrado.

3. Ingresa un número de tarjeta y contraseña inválidos y haz clic en el botón "submit".
   • Deberías ver el mensaje de error mostrado.

¡Felicidades! Has implementado con éxito la función de enlace de tarjeta.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.