添加Axios请求

2023-06-07 00:10:35 +08:00
parent ec3743e55b
commit f1a42895bf
3 changed files with 67 additions and 4 deletions
--- a/web/register.jsp
+++ b/web/register.jsp
@@ -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>