添加Axios请求

This commit is contained in:
landaiqing 2023-06-07 00:10:35 +08:00
parent ec3743e55b
commit f1a42895bf
3 changed files with 67 additions and 4 deletions

View File

@ -19,7 +19,7 @@ import java.io.IOException;
*/
@WebFilter("/*")// 过滤器所有的请求
public class UserSessionFilter implements Filter {
private String[] excludeUrls = new String[]{"/login", "/register", "/VerifycodeServlet"};
private String[] excludeUrls = new String[]{"/login", "/register", "/VerifycodeServlet","/ExUserNameServlet"};
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

View File

@ -0,0 +1,42 @@
package com.landaiqing.servlet;
import com.landaiqing.entity.UserEntity;
import com.landaiqing.service.UserService;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* http://localhost:8080/mayikt_session_war_exploded/exUserNameServlet?name=1
* @author 余胜军
* @ClassName ExUserNameServlet
* @qq 644064779
* @addres www.mayikt.com
* 微信:yushengjun644
*/
@WebServlet("/exUserNameServlet")
public class ExUserNameServlet extends HttpServlet {
private UserService UserService = new UserService();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
//1.获取到用户输入的userName参数值
String userName = req.getParameter("userName");
//2.调用数据库根据userName查询用户名称是否存在
UserEntity mayiktUserEntity = UserService.findByUserName(userName);
PrintWriter writer = resp.getWriter();
if (mayiktUserEntity != null) {
writer.print("该用户" + userName + "已经存在的 无法注册!");
}
writer.close();
}
}

View File

@ -10,12 +10,12 @@
<html>
<head>
<title>注册页面</title>
<form action="/JavaWeb_Login_Register_war_exploded/register" method="post">
<label>用户名: </label><input type="text" name="userName"/><br>
<form action="${pageContext.request.contextPath}/register" method="post">
<label>用户名: </label><input type="text" name="userName" onkeyup="mayiktAxios(this)"/><br>
<label>密&nbsp&nbsp&nbsp码: </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 style="color: red">${errorMsg}</span>
<span id="error" style="color: red">${errorMsg}</span>
<input type="submit" value="注册"/>
</form>
<script type="text/javascript">
@ -37,5 +37,26 @@
}
</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>