需求：实现用户名校验，如下图所示，当用户名在数据库中存在就提示注册过了，请换一个，没有的话，提示用户名可用
register.html代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="js/jquery-3.3.1.min.js"></script> <script> //给username绑定blur事件 $(function () { $("#username").blur(function () { //获得输入的值 var username = $(this).val(); //异步获取服务器中的值 //这中间传的数据是json数据{"userExsit":true} //不要忘记在客户端使用时，要想当做json数据格式使用 $.post("findUserservlet",{username:username},function (data) { if (data.userExsit){ //显示注册过了，显示红色 $("#S_username").css("color","red"); $("#S_username").html("注册过了,请换一个"); } else{ //显示绿色， $("#S_username").css("color","green"); $("#S_username").html("用户名可用"); } },"json") }) }) </script> <body> <form> <input type="text" id="username" name="username" placeholder="请输入用户名"> <span id="S_username"></span> <br> <input type="text" id="password" name="password" placeholder="请输入密码"> <br> <input type="submit" value="注册"> </form> </body> </html>
findUserServlet.java代码如下：
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 doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //设置编码 resp.setContentType("text/html;charset=utf-8"); //获得参数 String username = req.getParameter("username"); //创建map封装对象 Map<String,Object> map=new HashMap<String,Object>(); if(username.equals("tom")){ map.put("userExsit",true); } else { map.put("userExsit",false); } //将map转换成json对象,传给客户端 ObjectMapper mapper = new ObjectMapper(); mapper.writeValue(resp.getWriter(),map); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req,resp); } }
该案例可以直接访问数据库来获取数据，主要是异步ajax来获取json对象，以及将java对象转成json对象
