AJAX实现注册时的用户名验证

最新推荐文章于 2022-12-05 00:51:31 发布

PAOL

最新推荐文章于 2022-12-05 00:51:31 发布

阅读量4.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_42613859/article/details/80922088

版权

1. register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'register.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript">
  function validateName(){
   //提示用户名可不可用
   var sp = document.getElementById("sp");
   //获取页面输入的用户名
   var name = document.getElementById("uname").value;

   //1.创建AJAX对象
   var xhr = new XMLHttpRequest();
   //2.新建请求 (请求方式请求地址是否同步)
   xhr.open("post", "UserServlet.do", true);
   //3.请求头
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //4.请求体
   xhr.send("method=validateName&uname="+name);

   //5.前后台交互验证
   xhr.onreadystatechange = function(){
    //正常交互
    if(xhr.status==200 && xhr.readyState==4){
     //6.得到返回结果,并利用结果判断用户名是否可用
     var result = xhr.responseText;
       //返回true,可用
     if("true"==result){
      //判用户名是否为空
      if(name==null||name==""){
       sp.style.color = "red";
       sp.innerHTML = "用户名不可为空";
      }else{
       sp.style.color = "green";
       sp.innerHTML = "用户名可用";
      }
     }else{ //返回false,用户名不可用
      sp.style.color = "red";
      sp.innerHTML = "用户名不可用";
     }

    }
   };
  }
</script>
</head>

<body>
    用户名:<input type="text" name="username" id="uname" οnblur="validateName()"><span id="sp"></span><br/>
    头像：<input type="file"><br>
    <button type="submit">注册</button>
</body>
</html>

2. UserServlet

public class UserServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost(request,response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  //调用哪个方法
  String method = request.getParameter("method");

  if("validateName".equals(method))
   validateName(request,response);
}

//验证用户名
private void validateName(HttpServletRequest request,
   HttpServletResponse response) throws IOException {
  //用于向后台传数据
  PrintWriter out = response.getWriter();

  //一般要通过和数据库交互查看用户名是否可用，这里就直接给个zhangsan测试
  String name = request.getParameter("uname");
  //如果是zhangsan，数据库已经有了，重复不可用，返回false
  if("zhangsan".equals(name))
   out.write("false");
  else
   out.write("true");
}
}

3. 结果

PAOL

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现注册时的用户名验证

1. register.jsp&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName(...
复制链接

扫一扫