ajax异步校验用户名

最新推荐文章于 2024-09-11 20:28:45 发布

Baoxucoder

最新推荐文章于 2024-09-11 20:28:45 发布

阅读量276

点赞数 1

分类专栏： ajax异步操作文章标签： ajax 异步校验用户名获取验证码

本文链接：https://blog.csdn.net/onemoretime2016/article/details/78217614

版权

ajax异步操作专栏收录该内容

0 篇文章 0 订阅

订阅专栏

AJAX异步校验用户名

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
在web开发中，经常会遇到需要发送局部请求，比如说验证用户名是否存在，获取手机验证码等，
单纯的验证用户名是否存在没有必要提交整个页面，这样有助于提升响应速度。

这里写图片描述

前端代码

    <script type="text/javascript">
        function getXhr() {
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else {
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            return xhr;
        }
        function checkNameUnique() {
            var xhr = getXhr();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4&&xhr.status == 200){
                    document.getElementById("username_btn").value =xhr.responseText;
                }
            };
            xhr.open("post","/checkNameUnique",true);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            document.getElementById("username_btn").value = "正在验证";
            var uname = document.getElementById("username_register").value;
            var username = (uname=='用户名')?'':uname;
            xhr.send("uname="+username);
        }
    <script>
     ......
    <h2>注册  </h2>
    <form action="/register" method="post">
        <div>
            <input class="username_register" name="username_register" id="username_register" value="用户名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '用户名';}">
            <input class="btn" type="button" id="username_btn" value="验证用户名" onclick="checkNameUnique()"/>
        </div>
        <input classs="tel" name="usrtel" value="手机号" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '手机号';}">
        <div>
            <input class="content3" name="code" value="验证码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '验证码';}"/>
            <button class="btn" onclick="false;" >获取验证码</button>
        </div>
        <input class="pwd_register" name="psw_register" value="密码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '密码';}">
        <input type="submit" class="register" value="注册">
    </form>

后端代码

@RequestMapping(path = {"/checkNameUnique"},method = {RequestMethod.POST})
    @ResponseBody
    private String checkNameUnique(@RequestParam("uname") String username){
        return userService.checkUsername(username);
    }