使用axios异步框架改进表单验证

最新推荐文章于 2025-05-19 15:39:52 发布

9号楼的喵sir

最新推荐文章于 2025-05-19 15:39:52 发布

阅读量96

点赞数

文章标签： java servlet 开发语言

本文链接：https://blog.youkuaiyun.com/m0_56428218/article/details/127434064

版权

axiosServlet

 * @date 2022/10/19 17:46
 */
@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get");

        String username = req.getParameter("username");
        System.out.println(username);
        if(username=="zhangsan"){
            resp.getWriter().write("ture");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("post");
        this.doGet(req, resp);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="/anli01/registerServlet" method="post">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
<script src="js/axios-0.18.0.js"></script>
<script>

    document.getElementById("username").onblur = function(){
    var username = this.value
    axios({
        method:"get",
        url:"http://localhost/anli01/axiosServlet?username="+username
    }).then(function (resp) {
            if(resp.data == "true"){
                document.getElementById("username_err").style.display='';
            }else{
                document.getElementById("username_err").style.display='none';
            }
        })
    }
</script>
</body>
</html>