ajax----------5、注册时提示用户名已被注册

最新推荐文章于 2022-11-25 01:39:34 发布

george_zyf

最新推荐文章于 2022-11-25 01:39:34 发布

阅读量1k

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/android_zyf/article/details/75059532

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一,需求

在注册页面,当用户在输入框中输入zhangSan时,在输入框后面提示用户:用户名已注册.

二,流程

1,编写页面:

2,编写Servlet

ValidateUserNameServlet
- 获取客户端传递的用户名参数
- 判断是否为zhangSan
- 是:返回1
- 否:返回0

三，代码

@WebServlet(name = "ValidateUserServlet",urlPatterns = "/vus")
public class ValidateUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String user = request.getParameter("user");

        System.out.println(user);

        /**
         * 判断参数user是否为zhangSan
         * 如果是:响应1
         * 如果否:响应0
         */
        if("zhangSan".equals(user)){
            response.getWriter().print("1");
        }else {
            response.getWriter().print("0");
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script type="text/javascript">

        function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.HTTP");
                } catch (e) {
                    try {
                        return new ActiveXObject("Microsoft.HTTP");
                    } catch (e) {
                        throw e;
                    }
                }
            }
        }
        ;

        window.onload = function () {
            var user = document.getElementById("user");
            //给文本框的失去焦点事件注册监听
            user.onblur = function () {

                //1,获得XMLHttpRequest对象
                var xmlHttp = createXMLHttpRequest();
                //2,打开连接
                xmlHttp.open("POST", "/rd/vus", true);
                //3,设置请求头
                xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //4,发出请求时,给出请求体
                xmlHttp.send("user=" + this.value);
                //5,给xmlHttp对象的onreadystatechange事件注册监听
                xmlHttp.onreadystatechange = function () {
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        /**
                         * 获取服务器的响应,判断是否为1
                         * 若为1,则获取userError标签,设置内容:用户名已被注册
                         */
                        var text = xmlHttp.responseText;
                        if (text == "1") {
                            var userError = document.getElementById("userError");
                            userError.innerHTML = "用户名已注册";
                        }else {

                            var userError = document.getElementById("userError");
                            userError.innerHTML = "";
                        }
                    }
                };
            }


        };
    </script>
</head>
<body>
<h1 style="text-align: center">Welcome to join us!</h1>
<form method="post" >

    用户名:<input id="user" name="user" type="text"><span id="userError" style="color: red;margin-left: 10px"></span>
    <br/>
    密码:<input >
    <br/>
    <button type="submit">注册</button>
</form>
</body>
</html>