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>
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); } }