我将详细讲解“struts2+jquery实现ajax登陆实例详解”的完整攻略。

1. 前言

本文将介绍如何使用 Struts2 和 jQuery 实现前后端的交互，实现 AJAX 登录功能。

2. 后端代码

2.1 登录 Action

首先，我们需要创建一个登陆的 Action。在 Struts.xml 中配置该 Action 的入口路径。

<action name="login" class="com.example.LoginAction">
    <result name="success">/index.jsp</result>
    <result name="error">/login.jsp</result>
</action>

在 LoginAction 中，我们需要实现一个 login 方法，该方法将获取客户端发送来的 username 和 password，进行登陆的验证，并返回验证结果。如下所示：

public class LoginAction extends ActionSupport {

    private String username;
    private String password;

    @Override
    public String execute() throws Exception {
        if ("admin".equals(username) && "123456".equals(password)) {
            return SUCCESS;
        } else {
            return ERROR;
        }
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

登录成功后，我们将跳转到 index.jsp 页，否则，我们将返回登录页 login.jsp。

2.2 配置 Struts 2 过滤器

在 web.xml 中配置 Struts 2 过滤器。

<filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

3. 前端代码

3.1 登录页面

我们需要创建一个登录页面，包含用户输入用户名和密码的表单。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

            $("#submit").click(function () {
                $.post("login.action", {
                    username: $("#username").val(),
                    password: $("#password").val()
                }, function (data) {
                    if (data == "true") {
                        window.location.href = "index.jsp";
                    } else {
                        alert("用户名或密码错误！");
                    }
                });
            });

            $("#reset").click(function () {
                $(this).closest("form")[0].reset();
            });

        });
    </script>
</head>
<body>

<fieldset>
    <legend>用户登录</legend>
    <form>
        <div>
            <label>用户名：</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label>密码：</label>
            <input type="password" id="password" name="password" required>
        </div>
        <hr>
        <div>
            <button type="button" id="submit">登录</button>
            <button type="button" id="reset">重置</button>
        </div>
    </form>
</fieldset>

</body>
</html>

3.2 Ajax 请求

在登录页中，我们使用 jQuery 中的 $.post() 方法，发送一条 Ajax 请求，请求登录。

$.post("login.action", {
    username: $("#username").val(),
    password: $("#password").val()
}, function (data) {
    if (data == "true") {
        window.location.href = "index.jsp";
    } else {
        alert("用户名或密码错误！");
    }
});

请求的地址是 login.action，该地址对应 Struts.xml 中的配置。数据是以 JSON 格式发送的，包含用户输入的用户名和密码。

{
    username: $("#username").val(),
    password: $("#password").val()
}

请求结束后，我们可以根据返回数据进行相应的操作。在本案例中，如果返回的数据是 “true”，则跳转到 index.jsp 页面，否则，弹出错误提示框。

if (data == "true") {
    window.location.href = "index.jsp";
} else {
    alert("用户名或密码错误！");
}

4. 示例

4.1 登录

打开登录页面 login.jsp，在输入框中输入用户名和密码，点击登录按钮，即可进行登录。如果用户名或密码不正确，会提示登录失败。登录成功后，将跳转到 index.jsp 页面。

4.2 登录请求分析

使用浏览器的开发者工具，查看登录请求。我们可以看到是一条 POST 请求，请求地址为 login.action。请求数据包含用户名和密码。

POST /login.action HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0
Accept: */*
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Content-Length: 33
Origin: http://localhost:8080
Connection: keep-alive
Referer: http://localhost:8080/login.jsp

username=admin&password=123456

请求结束后，我们可以看到服务器返回的结果。

true

如果登录失败，则返回的数据是 false。

5. 总结

以上就是“struts2+jquery实现ajax登陆实例详解”的完整攻略。通过使用 Struts2 和 jQuery，我们可以很方便地实现前后端的交互，实现 AJAX 登录功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：struts2+jquery实现ajax登陆实例详解 - Python技术站

struts2+jquery实现ajax登陆实例详解