Ajax（get方法和Post方法）实现简单的用户账号校验

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/16
  Time: 11:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

  
    
  
  

  账号验证Get
  账号验证Post
  

postaccount.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/16
  Time: 15:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


<%--post更新--%>
 

 


<script src="js/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        $("[name=userName]").blur(function () {
            var userName = $(this).val();
            var $span = $(this).next();
            console.log(userName);
            var httpRequest = new XMLHttpRequest();
            httpRequest.open("post", "checkserv");
            httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
            httpRequest.send("userName=" + userName)
            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    $span.html(httpRequest.responseText);
                }
            }
        })
    })
</script>

getaccount.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/16
  Time: 11:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    


${message}

${message}



<script src="js/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        $("[name=userName]").blur(function () {
            var $span = $(this).next();
            // 1.实例化对象
            var httpRequest = new XMLHttpRequest(); // XMLHttpRequest:由浏览器提供
            //  2.设置请求的信息
            httpRequest.open("get", "checkserv?userName=" + $(this).val());
            // 3.发送请求到服务器
            httpRequest.send();
            // 4.设置回调函数
            httpRequest.onreadystatechange = function () {

                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    $span.html(httpRequest.responseText)
                }

            }


        })
    })


</script>

CheckAccountRepeatServlet.java

package stu.adam.control;

import javax.servlet.annotation.WebServlet;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "checkServlet", urlPatterns = "/checkserv")
public class CheckAccountRepeatServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        
        String userName = request.getParameter("userName");
        boolean flag = "admin".equals(userName);
        String message = "";
        if (flag) {
            message = userName + ",账号不可用";
        } else {
            message = userName + ",账号可用";
        }
        response.setContentType("text/plain;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.write(message);
        out.flush();
        out.close();

    }
}

效果（账号是admin就会标红报错）：(get与post的效果一致)