Ajax验证用户名是否已存在_ajax做id已经存在提示-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45555153/article/details/131827306

该代码示例展示了一个使用HTML和Ajax进行实时用户名检查的功能。当用户在表单中输入用户名时，Ajax调用Servlet来验证用户名是否已存在。Servlet处理请求并返回响应，然后前端根据响应更新用户界面，显示用户名是否可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <style>
        .change{
            border:3px solid lawngreen;
        }
        input{
            outline: none;
        }
    </style>
</head>
<body>
     <form action="/web13/checkname" method="post">
       用户名：<input type="text" id="username" name="username" oninput="check()" autocomplete="false">
         <span id="message" style="color: red"></span><br>
       密码：<input type="text" name="password" id="password">
       <input type="submit" value="提交">
       <input type="reset" value="重置">
     </form>
</body>
<script>
  function check(){
    //创建Ajax的xmlhttprequest对象
    var xhttprequest;
    if (window.XMLHttpRequest){
      xhttprequest=new XMLHttpRequest();
    }else {
      xhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
    }

    var user=document.getElementById("username");
    xhttprequest.open("POST","http://localhost:8080/web13/checkname?username="+user.value);//利用对象的value属性获取输入框的值
    xhttprequest.send();

    //请求对象状态改变的监听事件onreadystatechange
    xhttprequest.onreadystatechange=function (){

        if (xhttprequest.readyState==4 && xhttprequest.status==200){
            var message = xhttprequest.responseText;
            if (message=="true"){
                document.getElementById("message").innerText="用户名已存在，请重新输入";
                user.style.cssText="border:1px solid black;";
            }else if (message=="false"){
                //user.style.borderColor="lawngreen";
                document.getElementById("message").innerText="用户名可用";
                user.style.cssText="border:3px solid lawngreen;";
            }
        }
    }
  }
</script>
</html>

2、servelet



import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @Author ZRX
 * @Date 2023/7/19 20:35
 * @Description
 * @Version
 */
@WebServlet("/checkname")
public class AjaxCheckUserName extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("uTF-8");
        resp.setContentType("text/html;charset=utf-8");

        String name = req.getParameter("username");
        if (name.equals("zbh")){
            resp.getWriter().write("true");
        }else {
            resp.getWriter().write("false");
        }
    }
}