后端Servlet代码
package com.ityouxin.web;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/userServlet")
public class LoginAjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=UTF-8");
resp.setCharacterEncoding("utf-8");
ObjectMapper objectMapper = new ObjectMapper();
String name = req.getParameter("name");
System.out.println(name);
Map map = new HashMap();
if (name.equals("zhangsan")){
map.put("number",1);
objectMapper.writeValue(resp.getWriter(),map);
}else {
map.put("number",0);
objectMapper.writeValue(resp.getWriter(),map);
}
}
}
## 前端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 () {
$("#name").blur(function () {
if ($("#name").val()=="" || $("#password").val()=="" ) {
alert("用户名或者密码不能为空");
}else {
$.ajax({
url: "userServlet",
type: "GET",
data: {"name": $("#name").val()},
dataType: "json",
success: function (data) {
if (data.number == 1) {
$("#msg").html("该用户名太抢手啦!请重新输入")
$("#msg").css("color", "red")
} else if (data.number == 0) {
$("#msg").html("可以使用?")
$("#msg").css("color", "green")
}
}
})
}
})
})
</SCRIPT>
</head>
<body>
<form>
<input type="text" name="name" id="name"><br>
<input type="password" name="password" id="password"><br>
<input type="submit" name="submit" id="sub">
<span id="msg"></span>
</form>
</body>
</html>