使用 AJAX 和 JSON 实现登录验证

介绍

在这个项目中，你将学习如何使用 AJAX 和 JSON 数据传输来实现登录验证功能。该项目包括创建一个登录表单，使用 AJAX 处理表单提交，并在服务器端验证用户的登录凭证。

👀 预览

登录表单预览动图

🎯 任务

在这个项目中，你将学习：

如何准备项目环境并设置必要的文件和依赖项。
如何使用 HTML 在 AjaxJson.jsp 页面中实现登录表单。
如何使用 jQuery 和 AJAX 处理登录表单提交。
如何将登录数据封装成 JSON 格式并发送到服务器。
如何接收和处理来自服务器的 JSON 响应以确定登录状态。
如何根据登录结果将用户重定向到相应的页面。

🏆 成果

完成这个项目后，你将能够：

使用 AJAX 在不刷新整个页面的情况下将数据发送到服务器。
使用 JSON 数据格式在客户端和服务器之间进行数据传输。
在客户端处理表单提交和用户输入验证。
处理服务器的响应并相应地更新用户界面。
集成客户端和服务器端组件以创建完整的登录验证功能。

准备项目环境

在这一步中，你将学习如何准备项目环境。请按照以下步骤完成此步骤：

打开实验环境，并使用以下命令导航到 AjaxJsonProject 目录：
```
cd AjaxJsonProject/AjaxJsonProject
```
使用以下命令启动 Tomcat 服务器：
```
mvn tomcat7:run
```
切换到环境上方的 Web 8080 标签页，查看项目运行情况。

实现登录表单

在这一步中，你将学习如何在 AjaxJson.jsp 页面中实现登录表单。请按照以下步骤完成此步骤：

打开 AjaxJsonProject/AjaxJsonProject/src/main/webapp 目录下的 AjaxJson.jsp 文件。

添加以下 HTML 代码以创建登录表单：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录表单</title>
</head>
<body>
    <h2>登录表单</h2>
    <form id="loginForm">
        <label for="userName">用户名：</label>
        <input type="text" id="userName" name="userName"><br><br>

        <label for="userPwd">密码：</label>
        <input type="password" id="userPwd" name="userPwd"><br><br>

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

通过在 <head> 部分添加以下脚本标签来包含 jQuery 库：

<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>

使用 AJAX 处理登录表单提交

在这一步中，你将学习如何使用 AJAX 处理登录表单提交。请按照以下步骤完成此步骤：

在 AjaxJson.jsp 文件的 <script> 标签内添加以下 JavaScript 代码：

<script>
    $(document).ready(function(){
        $("#loginForm").submit(function(event){
            // 阻止表单的默认提交行为
            event.preventDefault();

            // 获取输入的用户名和密码
            var $userName = $("#userName").val();
            var $userPwd = $("#userPwd").val();

            // 检查用户名和密码是否为空
            if($userName.trim() === "" || $userPwd.trim() === ""){
                alert("用户名和密码不能为空");
                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("登录成功");
                        // 登录成功后重定向到 index.jsp
                        window.location.href = "index.jsp";
                    } else {
                        alert("用户名或密码错误");
                    }
                },
                error: function(xhr, status, error){
                    console.error("AJAX 请求失败: " + status + ", " + error);
                }
            });
        });
    });
</script>

这段代码通过阻止表单的默认行为、获取输入的用户名和密码，并向 /AJAXJSONLoginServlet 端点发送 AJAX 请求来处理表单提交。
后端将返回一个带有 code 属性的 JSON 响应。如果 code 为 200，则登录成功，用户将被重定向到 index.jsp 页面。如果 code 不为 200，则登录失败，并显示错误消息。

测试登录功能

如果 Tomcat 服务器尚未运行，请使用 mvn tomcat7:run 命令运行它。
打开环境上方的 Web 8080 标签页，查看项目运行情况。再次运行时，需要刷新页面。
输入有效的用户名和密码，然后点击“登录”按钮。
如果登录成功，你应该会看到一条“登录成功”的提示信息，并被重定向到 index.jsp 页面。
如果登录失败，你应该会看到一条“用户名或密码错误”的提示信息。

恭喜你！你已经成功使用 AJAX 和 JSON 数据传输实现了登录验证功能。

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

使用 AJAX 进行 JSON 数据传输

介绍