Personal blogs
often have the function of verifying the existence of a user name during user registration, relying on asynchronous requests to refresh some pages. Need to use JQUery, and the conversion of json and JAVA objects.
Front-end page writing
After the focus leaves the username box, it will automatically submit the content of the input box to the server, send an ajax request, and the parsing server returns json. If userExsit is true, it indicates that the username already exists, and if false, it indicates that the username is available.
<!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绑定blur事件
$("#username").blur(function () {
//获取username文本输入框的值
var username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
$.get("findUserServlet",{username:username},function (data) {
//判断userExsit键的值是否是true
// alert(data);
var span = $("#s_username");
if(data.userExsit){
//用户名存在
span.css("color","red");
span.html(data.msg);
}else{
//用户名不存在
span.css("color","green");
span.html(data.msg);
}
});
});
});
</script>
</head>
<body>
<form>
<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="注册"><br>
</form>
</body>
</html>
Servlet writing
Accept the data from the user, compare it with tom, set the userExsit value to true or false, and return json data.
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
String username = request.getParameter("username");
System.out.println(username);
Map<String,Object> map = new HashMap<String,Object>();
if("tom".equals(username)){
map.put("userExsit",true);
map.put("msg","此用户名已存在，请换一个");
}else {
map.put("userExsit",false);
map.put("msg","用户名可用");
}
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(),map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
) throws ServletException, IOException {
this.doPost(request, response);
}
}
