需求：在注册一个app时，需要输入用户名，但如果输入的用户名已经被其他人注册过了，还需要重新输入，此案例就是用来验证是否有人已经使用过该用户名了。 做法： 当文本框失去焦点后，发送ajax请求，查询数据库是否存在该用户名，如果存在则提示信息，如果不存在，则提示信息为可用。
html端： <head> <meta charset="UTF-8"> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <title>Insert title here</title> <script> $(function(){ //为username文本输入框添加失去焦点事件 $("#username").blur(function(){ //获取username文本框的值 var username=$("#username").val(); //发送ajax请求 //期望服务器返回的数据格式是：{"userExist":true,"msg":"此用户太受欢迎，请更换一个"} //{"userExist":false,"msg":"此用户名可用"} $.get("findUserServlet",{"username":username},function(data){ //alert(data); if(data.userExist){ //用户名存在 $("#s_username").css("color","red") $("#s_username").html(data.msg); }else{ $("#s_username").css("color","green") $("#s_username").html(data.msg); } },"json"); }); }); </script> </head> <body> <from> <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="注册" > </form> </body> findUserServlet端： response.setContentType("text/html;charset=utf-8"); //获取前端数据 String username=request.getParameter("username"); //查询数据库，此步省略了 Map<String, Object> map=new HashMap<String, Object>(); if("tom".equals(username)) { map.put("userExist",true); map.put("msg", "请用户名太受欢迎，更换一个"); }else { map.put("userExist", false); map.put("msg", "用户名可用"); } //将map转化成json,并且传递给客户端 ObjectMapper mapper=new ObjectMapper(); //传递给客户端 mapper.writeValue(response.getWriter(),map);注： （1）失去焦点的函数是 jq对象.blur() (2).css函数中的参数（“color”,“red”）中间用逗号，而不是":" （3）后台是直接将数据封装到了map中 (4)使用mapper.writeValue(response.getWriter(),map);函数直接将数据传递到了前端 （5）服务器相应的数据在客户端使用时，要是想当做json来使用，可以有两种方法进行设置： 第一种：在 . g e t ( ) 的 最 后 一 个 参 数 T y p e 设 置 成 " j s o n " , .get()的最后一个参数Type设置成"json", .get()的最后一个参数Type设置成"json",.get(“findUserServlet”,
{"username":username},function(data){ if(data.userExist){ //用户名存在 $("#s_username").css("color","red") $("#s_username").html(data.msg); }else{ $("#s_username").css("color","green") $("#s_username").html(data.msg); } },"json");第二种： 在服务器端设置MIME类型：
之前是：response.setContentType("text/html;charset=utf-8"); 现在是：response.setContentType("application/json;charset=utf-8");