Check username exists (ajax + jackson)

Just a simple imitation of a registered user name input from the focus testing

 

 Directory Structure

 

 

 

 Not related to database

html
<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > verify username exists </ title > 
    < Script the src = "JS / jQuery-3.3. 1.min.js " > </ Script > 
    < Script > 
        // page finishes loading 
        $ ( function () {
             // user name input box defines a defocus event 
            $ ( " #username " ).blur(function() {
                 // Get the value of the text input box 
                var username = $ ( the this ) .val ();
                 / * a desired response back to the server is a data format (JSON): 
                        { "userexit": to true, "MSG" : "this user is too popular, replace a"} 
                        { "userexit": to false, "MSG": "user name can be"} 
                 * / 
                $ .get ( " findUsernameServlet " , {username: username}, function (Data) { 
                    Alert (data.msg); 
                    var span = $ ( " #s_username ")
                     // Analyzing data response back userExit whether key to true 
                    IF{(data.usernameExsit)
                         // presence of true user name 
                        span.css ( " Color " , " Red " ); 
                        span.html (data.msg); 
                    } the else {
                         // to false user name does not exist 
                        span.css ( " Color " , " Green " ); 
                        span.html (data.msg); 
                    } 
                }, " JSON " ); 
            });
        });
    </script>
</head>
<body>
    <form action="" method="get">
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span><br>
        <input type="password" name="password">br> <= "Please enter your password"placeholder
        <input type="submit" value="注册">
    </form>
</body>
</html>
View Code
java servlet
@WebServlet("/findUsernameServlet")
public class FindUsernameServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");
        response.setContentType("application/json;charset=utf-8");

        Map<String,Object> map=new HashMap<>();
        /*判断浏览器客户端传过来的数据  username
           true { "userExit": true, "msg": " This user is too popular, replace a"} 
           to false { "userexit": to false, "MSG": "User name can be"} 
             * / 
        IF ( "Tom" . the equals (username)) { 
            map.put ( "usernameExsit", to true ); 
            map.put ( "MSG", "the user is too popular, replace a" ); 
        } the else { 
            map.put ( "usernameExsit", to false ); 
            map.put ( "MSG", "user name available" ); 
        } 
        // Java: 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);
    }
}
View Code

 

 

 

Guess you like

Origin www.cnblogs.com/shiguanzui/p/11833917.html