当用户输入要注册的账号时发送请求
jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册页面</title>
</head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
#imgy{
width:80px;
height:30px;
border-radius: 5px;
border: 0;
background:url('imag/yzm.png') no-repeat ;
background-size: 100% 100%;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: bold;
outline: none;
}
</style>
<body>
<div style="width: 300px;height: 350px;margin: 100px auto;">
<b id="errms" style="color: red">${zhucErr}</b>
<form action="zhuce" method="post">
<span>账号：</span><input type="text" onkeyup="isCun(this)" name="na"><br>
<span>验证码：</span><input style="width: 60px" type="text" name="yz" >
<input id="imgy" name="sjs" readonly placeholder="验证码"><br>
<span>输入密码：</span><input type="text" name="pw" ><br>
<span>再次输入密码：</span><input type="text" name="apw" ><br>
<input type="submit" value="注册"> <a href="login">取消</a>
</form>
<script type="text/javascript">
window.onload=function () {
var str="0123456789AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
var nu=0;
var im = document.getElementById("imgy");
sj();
im.onclick=function () {
sj();
};
function sj() {
var s="";
for (let i = 0; i < 4; i++) {
nu=Math.floor(Math.random()*62);
s=s.concat(" ",str.charAt(nu));
}
im.value=s;
}
};
function isCun(name) {
var eid = document.getElementById("errms");
axios({
method:'get',
url:'http://localhost:8080${pageContext.request.contextPath}/getName',
params:{
na:name.value
}
}).then(function (rs) {
eid.innerText=rs.data;
})
}
</script>
</div>
</body>
</html>
后端代码
@WebServlet("/getName")
public class getNameServlet extends HttpServlet {
private AdminService as=new AdminService();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf8");
String na = req.getParameter("na");
Admin admin = as.selectByNa(na);
PrintWriter w = resp.getWriter();
if(admin!=null){
w.write("当前账号["+na+"]已经存在");
w.close();
}
}
}