ajax--json技术--校验用户名是否存在

￡神魔★判官ぃ 2022-08-28 12:50 219阅读 0赞

# 校验用户名是否存在 #

### 前端regist.html ###

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

### 后端FindUserServlet ###

package com.liu.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 {
        
        @Override
        protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            //1.获取用户名
            String username = request.getParameter("username");
    
            //2.调用service判断用户名是否存在
            // 期望回应格式{"userExsit"：true,"msg":"此用户太受欢迎请更换一个"}
            // 期望回应格式{"userExsit"：false,"msg":"用户名可用"}
            response.setContentType("text/html;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
            ObjectMapper mapper = new ObjectMapper();
                //将数据传送给客户端
            mapper.writeValue(response.getWriter(),map);
        }
    }

*  校验用户名是否存在
    
    1.  服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
        
        1.  $.get(type):将最后一个参数type指定为"json"
        2.  在服务器端设置MIME类型  
            response.setContentType(“application/json;charset=utf-8”);