javaWeb中注册页面使用(Axios)ajax判断输入的账号是否已经存在

最新推荐文章于 2023-09-03 22:14:00 发布

️楠小弟

最新推荐文章于 2023-09-03 22:14:00 发布

阅读量392

点赞数

分类专栏： # JavaWeb空间文章标签： ajax servlet javascript

本文链接：https://blog.csdn.net/qq_45066822/article/details/129490354

版权

JavaWeb空间专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该文章展示了一个JSP注册页面的代码示例，包括输入账号、验证码和密码的字段。页面使用axios库进行异步请求，检查用户输入的账号是否已存在。后端使用Servlet处理请求，检查数据库中是否存在相同的账号。

摘要由CSDN通过智能技术生成

当用户输入要注册的账号时发送请求

在这里插入图片描述

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="注册">&nbsp;&nbsp;<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) {
                //获取id元素
                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();
        }
    }
}