簡介
利用AJAX的異步更新，實現注冊用戶時，焦點離開用戶名輸入框時，系統監測數據庫中是否已有該用戶名的功能，這里並沒有直接訪問數據庫，而是以假數據的形式寫了html和servlet頁面的部分功能。
代碼部分
<head>
<meta charset="UTF-8">
<title>注冊校驗</title>
<style>
#div1{
margin: 150px auto;
padding: 50px;
background-color: beige;
}
</style>
<script src="static/js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
//給用戶名輸入框綁定 失去焦點事件blur
$("#username").blur(function () {
//獲取文本框的值
var username = $(this).val();
//發送ajax請求。期望返回數據：{"userExsit":true,"msg":"用戶名已存在"}；{"userExsit":false,"msg":"該用戶名可用"}
$.get("findUsernameServlet",{username:username},
function (data) {
//獲取s_username元素
var s_username = $("#s_username");
//判斷userExsit值
if (data.userExsit){
//用戶名存在
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>
<div id="div1">
<form>
<input type="text" name="username" id="username" placeholder="請輸入用戶名">
<span id="s_username"></span><br>
<input type="password" name="password" id="password" placeholder="請輸入密碼"><br><br>
<input type="submit" value="注冊">
</form>
</div>
</body>
@WebServlet(urlPatterns = "/findUsernameServlet")
public class findUsernameServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//1. 獲取頁面傳來的username
String username = request.getParameter("username");
//2. 調用service層，判斷用戶名是否存在
Map<String,Object> map = new HashMap<String, Object>();//定義一個map返回處理結果的鍵值對
String exsitUsername = "Tom";//假設存在一個Tom
if (username.equals(exsitUsername)){
//用戶名存在
map.put("userExsit",true);
map.put("msg","用戶名已存在");
}else {
//用戶名不存在
map.put("userExsit",false);
map.put("msg","該用戶名可用");
}
//將map轉換為json，並傳遞給客戶端
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(response.getWriter(),map);
}
}