62 lines
2.3 KiB
Plaintext
62 lines
2.3 KiB
Plaintext
<%--
|
|
Created by IntelliJ IDEA.
|
|
User: mayikt
|
|
Date: 2022/6/6
|
|
Time: 17:12
|
|
To change this template use File | Settings | File Templates.
|
|
--%>
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>注册页面</title>
|
|
<form action="/JavaWeb_Login_Register_war_exploded/register" method="post">
|
|
<label>用户名: </label><input type="text" name="userName" onkeyup="mayiktAxios(this)"/><br>
|
|
<label>密   码: </label><input type="password" name="userPwd"/><br>
|
|
<label>验证码: </label><input type="text" name="code"/><img id="exchangecode" src="VerifycodeServlet">
|
|
<a id="ecode" href="#">看不清？换一张图片</a><br>
|
|
<span id="error" style="color: red">${errorMsg}</span>
|
|
<input type="submit" value="注册"/>
|
|
</form>
|
|
<script type="text/javascript">
|
|
window.onload = function () {
|
|
//获取img标签的对象
|
|
img = document.getElementById("exchangecode");
|
|
img.onclick = function () {
|
|
//加时间戳,避免浏览器缓存
|
|
var date = new Date().getTime()
|
|
img.src = "VerifycodeServlet?" + date;
|
|
}
|
|
//获取a标签的对象
|
|
ec = document.getElementById("ecode");
|
|
ec.onclick = function () {
|
|
//加时间戳
|
|
var date = new Date().getTime()
|
|
img.src = "VerifycodeServlet?" + date;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script>
|
|
function mayiktAxios(object) {
|
|
// 1.接受用户输入的userName
|
|
var userName = object.value;
|
|
// 2.使用Axios 发送ajax请求验证 userName是否存在的
|
|
axios({
|
|
// 请求方式
|
|
method: 'GET',
|
|
// 请求的地址
|
|
url: 'http://localhost:8080${pageContext.request.contextPath}/exUserNameServlet',
|
|
// URL 中的查询参数
|
|
params: {
|
|
userName: userName,
|
|
}
|
|
}).then(function (result) {
|
|
//定位 span id 名称 error 修改
|
|
document.getElementById("error").innerText = result.data;
|
|
})
|
|
}
|
|
</script>
|
|
</head>
|
|
</html> |