HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 在页面加载完成后
$(function () {
// username绑定离焦事件
$("#username").blur(function () {
// 获取username文本输入框的值
var username = $(this).val();
// 发送ajax请求
/*
期望服务器响应回的数据格式
{"userExist":true, "msg":"此用户名太受欢迎,请更换一个"}
{"userExist":false, "msg":"用户名可用"}
* */
$.get("findUserServlet", {"username":username}, function (data) {
// data是字符串
var span = $("#s_username");
alert(data.userExist);
if (data.userExist) {
console.log("用户名存在");
// 用户名存在
span.css("color", "red");
span.html(data.msg);
} else {
// 用户名不存在
console.log("用户名不存在");
span.css("color", "green");
span.html(data.msg);
}
}, "json"); // 指定响应数据数据类型为json。若不指定,则data将会被当做Object对象。
});
});
</script>
</head>
<body>
<form>
<input id="username" type="text" placeholder="请输入用户名" name="username">
<span id="s_username"></span>
<br>
<input type="password" placeholder="请输入用户名" name="password"><br>
<input type="submit" value="注册"><br>
</form>
</body>
</html>
Java代码:
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1.获取用户名
String username = request.getParameter("username");
// 2.调用service层判断用户名是否存在
/*
期望服务器响应回的数据格式
{"userExist":true, "msg":"此用户名太受欢迎,请更换一个"}
{"userExist":false, "msg":"用户名可用"}
* */
// 设置响应的数据格式为json
response.setContentType("application/json;charset=utf-8");
Map<String,Object> map = new HashMap<String,Object>();
// 此处假数据处理
if("master".equals(username)){
//存在
map.put("userExist",true);
map.put("msg","此用户名太受欢迎,请更换一个");
}else{
//不存在
map.put("userExist",false);
map.put("msg","用户名可用");
}
// 将map转为json,并且传递给客户端
// 将map转换为json,并且将json数据写入PrintWriter流中,传给客户端
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(),map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
注意:
服务器响应的数据,在客户端使用时,要想当做json数据格式使用,两种处理方式:
- 客户端处理:$.get(type); 将最后一个参数type指定为 “json”。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。
- 服务端处理:在服务器端设置响应数据的MIME类型。response.setContentType(“application/json;charset=utf-8”);