Implementar a Função de Ligação do Cartão

Introdução

Neste projeto, você aprenderá como implementar uma função de ligação de cartão usando jQuery e AJAX. Este projeto foi projetado para ajudá-lo a entender os fundamentos da dinamização de dados, uma habilidade crucial no desenvolvimento front-end.

👀 Pré-visualização

Os resultados bem-sucedidos são os seguintes:

Os efeitos de falha são os seguintes:

🎯 Tarefas

Neste projeto, você aprenderá:

• Como usar a função ajax do jQuery para recuperar dados de um arquivo JSON
• Como comparar a entrada do usuário com os dados do cartão recuperados
• Como exibir mensagens de sucesso ou falha com base na comparação

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Implementar uma função de ligação de cartão usando jQuery e AJAX
• Entender os fundamentos da dinamização de dados, uma habilidade crucial no desenvolvimento front-end
• Fazer requisições AJAX para recuperar dados de um servidor
• Manipular o DOM usando jQuery para exibir conteúdo dinâmico
• Usar classes Bootstrap para controlar a exibição e ocultação de alertas

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── index.html ## Página de ligação do cartão
├── bootstrap.min.css ## Arquivo Bootstrap
├── js
├───────cardnolist.json  ## Arquivo JSON
├───────index.js ## Arquivo JavaScript com código a ser completado
├───────jquery-3.6.0.min.js ## Arquivo jQuery

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Recuperar Dados do Cartão

Nesta etapa, você aprenderá como usar a função ajax do jQuery para recuperar os dados do cartão do arquivo js/cardnolist.json.

1. Abra o arquivo js/index.js.
2. Dentro da função bind, adicione o seguinte código para fazer uma requisição AJAX ao arquivo cardnolist.json:

function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // Os dados do cartão agora estão disponíveis na variável 'data'
    console.log(data);
  });
}

Este código fará uma requisição AJAX ao arquivo js/cardnolist.json.

Implementar a Função de Vinculação de Cartão

Nesta etapa, você implementará a função de ligação do cartão para comparar a entrada do usuário com os dados do cartão recuperados.

1. Dentro do arquivo js/index.js, encontre a função bind(cardno, password).
2. Substitua o comentário // TODO pelo seguinte 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 os dados do cartão do arquivo JSON, verifica se a entrada do usuário corresponde a algum dos números de cartão e senhas, e então exibe a mensagem de sucesso ou falha apropriada usando as classes do Bootstrap.

Testar a Função de Vinculação de Cartão

1. Salve o arquivo js/index.js e atualize a página index.html no seu navegador.

2. Insira um número de cartão e senha válidos (por exemplo, "001431562123561238" e "123456") e clique no botão "submit".

   • Você deve ver a mensagem de sucesso exibida.

   

3. Insira um número de cartão e senha inválidos e clique no botão "submit".

   • Você deve ver a mensagem de falha exibida.

   

Parabéns! Você implementou com sucesso a função de ligação do cartão.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.