Ajax+Struts2实现验证码验证功能实例代码

实现验证码验证功能是网站开发中非常常见的一项功能，其主要目的在于防止恶意攻击和机器人批量操作。本篇将向读者介绍如何使用Ajax和Struts2框架来实现验证码验证功能，并提供完整的示例代码。

实现过程

1. 前端

我们首先在前端的页面中添加一个输入框用来接收验证码，使其能够与后端进行通信。需要注意的是，此处需要开启CORS跨域支持，因为我们后端与前端所在服务器不同。

<input type="text" id="verifyCode" placeholder="验证码" required>

为了实现Ajax请求并接收后端发来的验证码验证结果，我们需要使用jQuery库。同时，为了避免CSRF攻击，我们需要在请求头中添加CSRF Token。完整代码如下：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  // 获取CSRF Token
  const csrfToken = document.querySelector('input[name="csrfToken"]').value;
  // 监听验证码输入框的文本变化
  $("#verifyCode").on("input", function() {
    // 获取用户输入的验证码
    const code = $(this).val();
    // 发送Ajax请求
    $.ajax({
      url: "http://localhost:8080/checkVerifyCode.action",
      type: "POST",
      data: {
        code: code
      },
      beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Csrf-Token', csrfToken);
      },
      success: function(data) {
        if (data === "false") {
          alert("验证码错误！");
        }
      }
    })
  });
</script>

我们可以看到，在Ajax的请求中，我们向后端POST请求了一个名为checkVerifyCode.action的URL，并传递了一个名为code的参数。此处的type参数表明我们向后端发送的是一条POST请求，前置选项beforeSend中添加了CSRF Token，这是一个保证安全性的必要步骤。

2. 后端

接下来，我们需要在后端Struts2的Action中编写代码逻辑来验证用户输入的验证码是否有效。在这一步中，我们可以使用Session作为存储验证码的介质。

首先，我们需要在Action的类中添加一个类型为String的验证码属性。

private String verifyCode;

然后，我们需要在Action的execute()方法中在Session中存储验证码。

public String execute() {
  // 将验证码存储在Session中
  ActionContext.getContext().getSession().put("verifyCode", verifyCode);
  return SUCCESS;
}

随后，在named为checkVerifyCode的方法中，我们需要从Session中获取存储的验证码并根据用户输入进行判断。

public String checkVerifyCode() {
   String code = (String) ActionContext.getContext().getSession().get("verifyCode");
   if (code != null && code.equalsIgnoreCase("用户输入")) {
       // 验证码正确
       return SUCCESS;
   } else {
       // 验证码错误
       return ERROR;
   }
}

以上就是完整的验证码验证实现过程。通过与前端的Ajax交互，我们成功地实现了验证码功能，并能够防止爬虫机器人的访问。

示例1

下面是一个完整的例子，演示了如何在Struts2中使用Ajax实现验证码验证。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ajax + Struts2 实现验证码验证功能</title>
</head>
<body>
  <form method="post" action="login.action">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="password" name="password" placeholder="密码" required>
    <input type="text" name="verifyCode" placeholder="验证码" required>
    <img src="verifyCode.action">
    <input type="hidden" name="csrfToken" value="<s:token/>">
    <button type="submit">登录</button>
  </form>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    const csrfToken = document.querySelector('input[name="csrfToken"]').value;
    $("#verifyCode").on("input", function() {
      const code = $(this).val();
      $.ajax({
        url: "http://localhost:8080/checkVerifyCode.action",
        type: "POST",
        data: {
          code: code
        },
        beforeSend: function(xhr) {
          xhr.setRequestHeader('X-Csrf-Token', csrfToken);
        },
        success: function(data) {
          console.log(data);
          if (data === "false") {
            alert("验证码错误！");
          }
        }
      })
    });
  </script>
</body>
</html>

public class LoginAction extends ActionSupport implements ServletRequestAware {
  private HttpServletRequest request;
  private String username;
  private String password;
  private String verifyCode;

  public void setServletRequest(HttpServletRequest request) {
    this.request = request;
  }

  public String execute() {
    // 将验证码存储在Session中
    ActionContext.getContext().getSession().put("verifyCode", verifyCode);
    return SUCCESS;
  }

  public String checkVerifyCode() {
    String code = (String) ActionContext.getContext().getSession().get("verifyCode");
    if (code != null && code.equalsIgnoreCase(verifyCode)) {
      // 验证码正确
      return SUCCESS;
    } else {
      // 验证码错误
      return ERROR;
    }
  }

  public String login() {
    if (username.equals("admin") && password.equals("admin")) {
      return SUCCESS;
    } else {
      return ERROR;
    }
  }

  // 省略 getter 和 setter 方法
}

示例2

下面的例子展示了如何使用Ajax检查用户名是否已经被注册。这个功能非常常见，它能够有效防止恶意用户注册大量垃圾账户。

在前端，我们需要开启CORS跨域支持，以便向后端服务器发送请求。

$.ajax({
  url: "http://localhost:8080/checkUsername.action",
  type: "POST",
  data: {
    username: username
  },
  beforeSend: function(xhr) {
    xhr.setRequestHeader('X-Csrf-Token', csrfToken);
  },
  success: function(data) {
    if (data === "true") {
      alert("用户名已被使用！");
    }
  }
})

在后端，我们需要查询数据库中是否存在与该用户名相同的记录。

public String checkUsername() {
  try {
    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "root");
    String sql = "SELECT * FROM users WHERE username = ?";
    PreparedStatement pstmt = conn.prepareStatement(sql);
    pstmt.setString(1, username);
    ResultSet rs = pstmt.executeQuery();
    if (rs.next()) {
      // 用户名已被注册
      return SUCCESS;
    } else {
      // 用户名可用
      return ERROR;
    }
  } catch (SQLException e) {
    e.printStackTrace();
    return ERROR;
  }
}

以上就是完整的实现过程。通过使用Ajax向后端发送请求，我们能够实时检查用户名是否可用，同时避免了页面的刷新和跳转，优化了用户体验。

总结

本文介绍了如何使用Ajax和Struts2框架来实现验证码验证功能。通过前后端的配合和逻辑的实现，我们在网站开发中能够更好地防止恶意攻击和批量操作，保证了网站前端的安全性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax+Struts2实现验证码验证功能实例代码 - Python技术站

Ajax+Struts2实现验证码验证功能实例代码

实现过程

1. 前端

2. 后端

示例1

示例2

总结

相关文章