Реализация проверки входа с использованием AJAX и JSON

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

Использовать AJAX для отправки данных на сервер без полной перезагрузки страницы.
Работать с форматом данных JSON для передачи данных между клиентом и сервером.
Обрабатывать отправку формы и проверку ввода пользователя на стороне клиента.
Обрабатывать ответ сервера и обновлять пользовательский интерфейс соответственно.
Интегрировать компоненты клиентской и серверной сторон для создания полной функции проверки входа.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/NetworkingGroup(["Networking"]) javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/NetworkingGroup -.-> javascript/http_req("HTTP Requests") javascript/NetworkingGroup -.-> javascript/json("JSON") subgraph Lab Skills javascript/dom_manip -.-> lab-300378{{"Передача данных JSON с использованием AJAX"}} javascript/event_handle -.-> lab-300378{{"Передача данных JSON с использованием AJAX"}} javascript/http_req -.-> lab-300378{{"Передача данных JSON с использованием AJAX"}} javascript/json -.-> lab-300378{{"Передача данных JSON с использованием AJAX"}} end

Подготовка окружения проекта

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

Откройте среду лаборатории и перейдите в каталог AjaxJsonProject с использованием следующей команды:
```
cd AjaxJsonProject/AjaxJsonProject
```
Запустите сервер Tomcat с использованием следующей команды:
```
mvn tomcat7:run
```
Переключитесь на вкладку Web 8080 выше среды, чтобы увидеть, как проект запущен.

Реализация формы входа

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

Откройте файл AjaxJson.jsp в каталоге AjaxJsonProject/AjaxJsonProject/src/main/webapp.

Добавьте следующий HTML-код, чтобы создать форму входа:

<%@ 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>

Включите библиотеку jQuery, добавив следующую тег-скрипт в раздел <head>:
```
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
```

Обработка отправки формы входа с использованием AJAX

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

Добавьте следующий JavaScript-код внутри тегов <script> в файле AjaxJson.jsp:

<script>
    $(document).ready(function(){
        $("#loginForm").submit(function(event){
            // Предотвратить стандартное поведение отправки формы
            event.preventDefault();

            // Получить введенное имя пользователя и пароль
            var $userName = $("#userName").val();
            var $userPwd = $("#userPwd").val();

            // Проверить, пусты ли имя пользователя и пароль
            if($userName.trim() === "" || $userPwd.trim() === ""){
                alert("Username and password cannot be empty");
                return;
            }

            // Упаковать данные для отправки в формате JSON
            var data = {
                "u_name": $userName,
                "u_pwd": $userPwd
            };

            // Отправить AJAX-запрос
            $.ajax({
                type: "POST",
                url: "/AJAXJSONLoginServlet",
                contentType: "application/json",
                data: JSON.stringify(data),
                dataType: "json",
                success: function(response){
                    // Проверить, был ли вход успешным на основе возвращенных данных
                    if(response.code === 200){
                        alert("Login successful");
                        // Перенаправить на index.jsp после успешного входа
                        window.location.href = "index.jsp";
                    } else {
                        alert("Incorrect username or password");
                    }
                },
                error: function(xhr, status, error){
                    console.error("AJAX request failed: " + status + ", " + error);
                }
            });
        });
    });
</script>

Этот код обрабатывает отправку формы, предотвращая стандартное поведение формы, получая введенное имя пользователя и пароль и отправляя AJAX-запрос на конечную точку /AJAXJSONLoginServlet.
Бэкенд вернет JSON-ответ с свойством code. Если код равен 200, вход успешен, и пользователь перенаправляется на страницу index.jsp. Если код не равен 200, вход не удался, и отображается сообщение об ошибке.

Тестирование функциональности входа

Запустите сервер Tomcat с помощью команды mvn tomcat7:run, если он еще не запущен.
Откройте вкладку Web 8080 выше среды, чтобы увидеть, как проект работает. При повторном запуске необходимо обновить страницу.
Введите действительное имя пользователя и пароль, затем нажмите кнопку "Login".
Если вход успешен, вы должны увидеть сообщение об уведомлении "Login successful" и быть перенаправленным на страницу index.jsp.
Если вход не удался, вы должны увидеть сообщение об уведомлении "Incorrect username or password".

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

✨ Проверить решение и практиковаться

Резюме

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