JavaWeb校验用户名小案例（Ajax实现，未连接数据库）

深藏阁楼爱情的钟 2023-07-03 03:17 17阅读 0赞

设定数据库种已存在的用户名为" Tom " ，若在注册用户名表单中输入 " Tom " 则显示此用户名已被使用 ，若不是 " Tom " 则显示用户名可用。

仅包含一个html页面和一个servlet，此案例仅用于学习Ajax。

使用Jackson技术。需导入外部Jar包

### Html代码： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script src="js/jquery-3.3.1.min.js"></script>
    
    
        <script>
            //在页面加载完成后
            $(function () {
               //给username绑定blur事件
               $("#username").blur(function () {
                   //获取username文本输入框的值
                   var username = $(this).val();
                   //发送ajax请求
                   //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
                   //                         {"userExsit":false,"msg":"用户名可用"}
                   $.get("findUserServlet",{username:username},function (data) {
                       //判断userExsit键的值是否是true
    
                       // alert(data);
                       var span = $("#s_username");
                       if(data.userExsit){
                           //用户名存在
                           span.css("color","red");
                           span.html(data.msg);
                       }else{
                           //用户名不存在
                           span.css("color","green");
                           span.html(data.msg);
                       }
                   });
    
               }); 
            });
    
        </script>
    </head>
    <body>
    
    
        <form>
    
            <input type="text" id="username" name="username" placeholder="请输入用户名">
            <span id="s_username"></span>
            <br>
            <input type="password" name="password" placeholder="请输入密码"><br>
            <input type="submit" value="注册"><br>
    
        </form>
    
    </body>
    </html>

## ##

### Servlet代码： ###

package cn.itcast.web.servlet;
    
    import com.fasterxml.jackson.databind.ObjectMapper;
    
    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;
    import java.util.HashMap;
    import java.util.Map;
    
    @WebServlet("/findUserServlet")
    public class FindUserServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1.获取用户名
            String username = request.getParameter("username");
    
            //2.调用service层判断用户名是否存在
    
            //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
            //                         {"userExsit":false,"msg":"用户名可用"}
    
            //设置响应的数据格式为json
            response.setContentType("application/json;charset=utf-8");
            Map<String,Object> map = new HashMap<String,Object>();
    
            if("tom".equals(username)){
                //存在
                map.put("userExsit",true);
                map.put("msg","此用户名太受欢迎,请更换一个");
            }else{
                //不存在
                map.put("userExsit",false);
                map.put("msg","用户名可用");
            }
    
            //将map转为json，并且传递给客户端
            //将map转为json
            ObjectMapper mapper = new ObjectMapper();
            //并且传递给客户端
            mapper.writeValue(response.getWriter(),map);
    
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }