Ajax实现登录时的用户名验证(Servlet 响应)

登录提交表单使用 POST 请求进行验证及转发;
输入用户名(是否正确)及密码(是否为空) 使用 GET 请求进行验证;

1. 登录界面及主页

<!--login.jsp-->
<form action="login" method="POST">
    <div>
        <input type="text" name="username" id="userId" placeholder="用户名">
        <span class="info"></span>
    </div>
    <div>
        <input type="password" name="password" id="passwd" placeholder="密码">
    </div>
    <input type="submit" value="登   录"  id="submit" >
    <span class="hint">${error} </span>
</form>

<!--index.jsp-->
<h3 style='color:#00f'>亲爱的${user.n
  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 创建一个 LoginServlet 类,继承 HttpServlet 类,并重写 doGet() 和 doPost() 方法,用于处理登录请求。 ```java import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/login") public class LoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); String password = request.getParameter("password"); // 模拟登录验证 boolean success = "admin".equals(username) && "123456".equals(password); response.setContentType("text/plain"); PrintWriter out = response.getWriter(); if (success) { out.write("success"); } else { out.write("fail"); } out.close(); } } ``` 2. 在登录页面中添加 AJAX 请求的 JavaScript 代码,用于发送登录请求并处理响应。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login</title> <script> function login() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var response = xhr.responseText; if (response === "success") { alert("登录成功"); } else { alert("登录失败"); } } }; xhr.open("POST", "login", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("username=" + username + "&password=" + password); } </script> </head> <body> <form> <label>用户名:</label> <input type="text" id="username" name="username"/><br/> <label>密码:</label> <input type="password" id="password" name="password"/><br/> <input type="button" value="登录" onclick="login()"/> </form> </body> </html> ``` 3. 运行项目,访问登录页面,输入用户名和密码,点击登录按钮,页面会发送 AJAX 请求到 LoginServlet,并根据响应结果弹出提示框。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值