```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<title>Register</title>
<script type="text/javascript">
//页面加载完毕
$(function () {
//给username绑定blur事件
$("#username").blur(function () {
//获取username输入的值
var username = $(this).val();
//发送ajax请求
// $.post("findUserServlet");
$.get("FindUserServlet",{username:username},function (data){
//判断userExist
var span = $("#e_username");
if (data.userExist){
//用户名存在
span.css("backgroundColor","red");
span.html(data.msg);
}else {
//用户名不存在
span.css("backgroundColor","pink");
span.html(data.msg);
}
});
})
})
</script>
</head>
<body>
<form>
<input type="text" id="username" placeholder="请输入用户名">
<span id="e_username"></span>
<br>
<input type="password" id="password" placeholder="请输入密码">
<br>
<input type="submit" value="注册">
</form>
</body>
</html>
```java
@WebServlet("/FindUserServlet")
public class FindUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
//获取用户名
String username = request.getParameter("username");
//调用Service判断用户名是否存在
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);
}
}
