Ajax模仿登录验证名称界面

大名张无忌

于 2020-04-22 21:39:43 发布

阅读量184

点赞数

分类专栏： Ajax 文章标签： jquery ajax

本文链接：https://blog.csdn.net/qq_40029828/article/details/105693433

版权

Ajax 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

index文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
<!--    <link rel="stylesheet" href="css/bootstrap.min.css">-->
    <script src="js/jqueryMin.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--    <script src="js/bootstrap.min.js"></script>-->
</head>
<style>
    .form-group{
        position: relative;
    }
    .form-control{
        width: 800px;
    }
    .mask{
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:rgba(0,0,0,0.5);
    }
    .disabled{
        background-color: #8c8c8c;
    }
</style>
<body>
<div class="container">
    <form>
        <div class="form-group">
            <div class="mask"></div>
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="名字">
        </div>
        <button type="button" class="btn btn-default disabled">注册</button>
        <br>
        <span class="tips"></span>
    </form>
</div>
<script>
    function ajaxpro(option){
        var aja=new XMLHttpRequest();
        if (option.type=='get'&&option.data){
            option.url=option.url+'?'+option.data;
            option.data=null;
        };
        aja.open(option.type,option.url);
        if (option.type=='post'&&option.data){
            aja.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        };
        aja.onreadystatechange=function () {
            if(aja.readyState==4&&aja.status==200){
                type=aja.getResponseHeader('Content-Type');
                if (type.indexOf('xml')!=-1){
                    option.success(aja.responseXML);
                }else if(type.indexOf('json')!=-1){
                    option.success(aja.responseText);
                }else {
                    option.success(aja.responseText);
                }
            }
        };
        aja.send(option.data);
    };
    $('input').on('blur',function () {
        $('.mask').show();
        //jquery封装了ajax函数，直接调用$.ajax(){}即可
        ajaxpro({
            'type':'get',
            'url':'hello.php',
            'data':'name='+$('input').val(),
            'success':function (data) {
                $('.mask').hide();
                console.log(data);
                if (data==1){
                    $('.tips').html('被注册了')
                    $('button').addClass('disabled');
                }else {
                    $('.tips').html('可以使用');
                    $('button').removeClass('disabled');
                }
            }
        });
        //需求：点击注册，把名字传进去php数组，传的时候有遮罩层，回调成功就没了
        $('button').on('click',function () {
            //需求：禁止按钮连续被点击，在点击时增加判断
            if($('button').hasClass('disabled')==true){
                alert('哥们儿别点了');
                return;
            }
            $('.mask').show();
            ajaxpro({
                'type': 'post',
                'url':'hello.php',
                'data':'name='+$('input').val(),
                'success':function(data){
                    $('.mask').hide();
                    $('.tips').html('注册成功');
                    console.log(data);
                    //需求：名字注册成功后，按钮灰掉
                    $('button').addClass('disabled');
                }
            })
        });
    })
</script>
</div>
</body>
</html>

hello.php文档
问题：每次调用数据库，$namelist都会重新赋值，所以push值没有用，会被刷新掉

    <?php
    $namelist=['haha','yeah','oh','12','34'];
    if ($_GET){
        if (array_search($_GET['name'],$namelist)){
            echo true;
        }else{
            echo false;
        };
    }else{
       array_push($namelist,$_POST['name']);
       print_r($namelist);
    }
    ?>

新的index文档，增加了发送验证码的倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
<!--    <link rel="stylesheet" href="css/bootstrap.min.css">-->
    <script src="js/jqueryMin.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--    <script src="js/bootstrap.min.js"></script>-->
</head>
<style>
    *{
        margin: 0 auto;
        padding: 0 auto;
    }
.regis{
    width: 500px;
    height: 400px;
    border: 1px solid skyblue;
    transform: translate(-50% -50%);
    padding: 10px;
}
    .regis span{
        display: inline-block;
        width: 100px;
        height: 60px;
    }
    .tips{
        color: red;
    }
    .code{
        background-color: skyblue;
    }
    .regis .disabled{
        background-color: darkgray;
    }
</style>
<body>
<div class="regis">
    <form action="">
        <span>用户名：</span><input type="text" class="name"><br>
        <span>密码</span><input type="text"><br>
        <span>确认密码：</span><input type="text"><br>
       <span>手机号：</span><input type="text" class="mobile"><br>
        <span>短信验证码：</span><input type="text"><input type="button" value="获取验证码" class="code"><br>
        <input type="button" value="提交"><span class="tips"></span>
    </form>
</div>
<script>
//1、用户名失去焦点验证，修改页面显示
    $('.name').blur(function () {
        $.ajax({
            url:'hello.php',
            data:{
                name:$('.name').val()
            },
            success:function (data) {
                if (data==11){
                    $('.tips').html('不能使用了');
                }else {
                    $('.tips').html('可以用呀');
                }
                console.log(data);
            }
        })
    });
    //2、手机号，输入手机号，验证
    //等待php文档，跟用户名验证一致
    //3、点击获取验证码，变成不可点，且开始倒计时
    $('.code').on('click',function () {
        if($(this).hasClass('disabled')){
            alert('你才是肥猪');
            return;
        };
        $(this).addClass('disabled');
        var totalTime=3;
        $('.code').val('还剩'+totalTime+'S')
        var timeOut=setInterval(function () {
            totalTime--;
            if (totalTime==0){
                //$(this).removeClass('disabled');
                clearInterval(timeOut);
                $('.code').val('获取验证码');
                $('.code').removeClass('disabled');
                return;
            }
            $('.code').val('还剩'+totalTime+'S');
        },1000)
    })
</script>

</body>
</html>

大名张无忌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax模仿登录验证名称界面

index文档<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title><!-- <link rel="stylesheet" href="css/bootstrap.min.c...
复制链接

扫一扫

专栏目录