Implemente Verificação de Login com AJAX e JSON - Tutorial de Programação

Introdução

Neste projeto, você aprenderá como implementar um recurso de verificação de login usando AJAX e transferência de dados JSON. O projeto envolve a criação de um formulário de login, o tratamento do envio do formulário com AJAX e a validação das credenciais de login do usuário no lado do servidor.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

Como preparar o ambiente do projeto e configurar os arquivos e dependências necessárias.
Como implementar o formulário de login na página AjaxJson.jsp usando HTML.
Como lidar com o envio do formulário de login usando jQuery e AJAX.
Como encapsular os dados de login em formato JSON e enviá-los para o servidor.
Como receber e processar a resposta JSON do servidor para determinar o status do login.
Como redirecionar o usuário para a página apropriada com base no resultado do login.

🏆 Conquistas

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

Usar AJAX para enviar dados para o servidor sem uma atualização completa da página.
Trabalhar com o formato de dados JSON para transferência de dados entre o cliente e o servidor.
Lidar com o envio do formulário e a validação da entrada do usuário no lado do cliente.
Processar a resposta do servidor e atualizar a interface do usuário de acordo.
Integrar componentes do lado do cliente e do lado do servidor para criar um recurso completo de verificação de login.

Prepare o Ambiente do Projeto

Nesta etapa, você aprenderá como preparar o ambiente do projeto. Siga os passos abaixo para concluir esta etapa:

Abra o ambiente do laboratório e navegue até o diretório AjaxJsonProject usando o seguinte comando:
```
cd AjaxJsonProject/AjaxJsonProject
```
Inicie o servidor Tomcat com o seguinte comando:
```
mvn tomcat7:run
```
Mude para a aba Web 8080 acima do ambiente para ver o projeto em execução.

✨ Verificar Solução e Praticar

Nesta etapa, você aprenderá como implementar o formulário de login na página AjaxJson.jsp. Siga os passos abaixo para concluir esta etapa:

Abra o arquivo AjaxJson.jsp no diretório AjaxJsonProject/AjaxJsonProject/src/main/webapp.

Adicione o seguinte código HTML para criar o formulário de login:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
</head>
<body>
    <h2>Login Form</h2>
    <form id="loginForm">
        <label for="userName">Username:</label>
        <input type="text" id="userName" name="userName"><br><br>

        <label for="userPwd">Password:</label>
        <input type="password" id="userPwd" name="userPwd"><br><br>

        <input type="submit" value="Login">
    </form>
</body>
</html>

Inclua a biblioteca jQuery adicionando a seguinte tag de script na seção <head>:
```
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
```

✨ Verificar Solução e Praticar

Nesta etapa, você aprenderá como lidar com o envio do formulário de login usando AJAX. Siga os passos abaixo para concluir esta etapa:

Adicione o seguinte código JavaScript dentro das tags <script> no arquivo AjaxJson.jsp:

<script>
    $(document).ready(function(){
        $("#loginForm").submit(function(event){
            // Prevent the default form submission behavior
            event.preventDefault();

            // Get the entered username and password
            var $userName = $("#userName").val();
            var $userPwd = $("#userPwd").val();

            // Check if the username and password are empty
            if($userName.trim() === "" || $userPwd.trim() === ""){
                alert("Username and password cannot be empty");
                return;
            }

            // Encapsulate the data to be sent in JSON format
            var data = {
                "u_name": $userName,
                "u_pwd": $userPwd
            };

            // Send an AJAX request
            $.ajax({
                type: "POST",
                url: "/AJAXJSONLoginServlet",
                contentType: "application/json",
                data: JSON.stringify(data),
                dataType: "json",
                success: function(response){
                    // Check if the login was successful based on the returned data
                    if(response.code === 200){
                        alert("Login successful");
                        // Redirect to index.jsp after successful login
                        window.location.href = "index.jsp";
                    } else {
                        alert("Incorrect username or password");
                    }
                },
                error: function(xhr, status, error){
                    console.error("AJAX request failed: " + status + ", " + error);
                }
            });
        });
    });
</script>

Este código lida com o envio do formulário, prevenindo o comportamento padrão do formulário, obtendo o nome de usuário e a senha inseridos e enviando uma requisição AJAX para o endpoint /AJAXJSONLoginServlet.
O backend retornará uma resposta JSON com uma propriedade code. Se o código for 200, o login será bem-sucedido e o usuário será redirecionado para a página index.jsp. Se o código não for 200, o login falhará e uma mensagem de erro será exibida.

✨ Verificar Solução e Praticar

Execute o servidor Tomcat com o comando mvn tomcat7:run, caso ele ainda não esteja em execução.
Abra a aba Web 8080 acima do ambiente para ver o projeto em ação. Ao executar novamente, você precisará atualizar.
Insira um nome de usuário e senha válidos e, em seguida, clique no botão "Login".
Se o login for bem-sucedido, você deverá ver uma mensagem de alerta "Login successful" e ser redirecionado para a página index.jsp.
Se o login falhar, você deverá ver uma mensagem de alerta "Incorrect username or password".