jQuery中Ajax基本应用实例

jQuery中Ajax基本应用

简单模拟用户名不为空注册验证和获取验证码倒计时

    // 引包
    <script src="./js/jquery.min.js"></script>

用户名不能为空验证

    <script>
    // 注册按钮
    $('.submit').on('click',function(){
        // 用于保存this指向 方便后面调用
        var $this = $(this);
        // 查询到有disabled时 防止重复提交
        if($this.hasClass('disabled')) return;
        // jQuery ajax使用
        $.ajax({
            type:'post',
            url:'register.php',
            data:$('#ajaxForm').serialize(),
            // timeout超时取消请求  即超过指定时间将自动取消请求
            // timeout:2000,
            // 发送请求前的处理函数
            beforeSend:function(){
                // 验证用户名为空
                if($('.name').val() == ''){
                    // 显示提示框
                    $('.tips p').stop(true,true).fadeIn(400).delay(1500).fadeOut(400).html('用户名不能为空！');
                    // 终止请求
                    return false;
                }
                // 用户名不为空时改变按钮颜色和文字信息
                $this.addClass('disabled').val('正在提交...');
            },
            // 请求成功后的回调函数
            success:function(data){
                // data为服务器返回的数据
                // console.log(data);
                alert('注册成功！');
            },
            // 请求失败后的回调函数
            error:function(){
                // 也有返回数据  XMLHttpRequest对象数据和错误信息  
                alert('注册失败！');
            },
            // 请求完成后回调函数 请求成功或失败时都会调用
            complete:function(){
                // 也有返回数据  XMLHttpRequest对象数据
                // console.log(data);
                // 处理后还原注册按钮
                $this.removeClass('disabled').val('立即注册');
            }
            });
    });

获取验证码倒计时

    // 获取验证码按钮
    $('.verify').on('click',function(){
        var $this = $(this);
        if($this.hasClass('disabled')) return;
        $.ajax({
            type:'post',
            url:'getCode.php',
            data:{},
            beforeSend:function(){
                // 计数器
                var num = 10;
                if($('.mobile').val() == ''){
                    $('.tips p').stop(true,true).fadeIn(400).delay(1500).fadeOut(400).html('手机号不能为空！');
                    return false;
                }
                // 11位简单验证
                if(/^1\d{10}$/.test($('.mobile').val())){
                    alert('手机号正确');
                    var timer = setInterval(function(){
                        num--;
                        $this.val(num + '秒后再获取').addClass('disabled');
                        if(num <=0){
                            // 清除定时器
                            clearInterval(timer);
                            $this.removeClass('disabled').val('获取验证码');
                        }
                    },1000);
                }else{
                    $('.tips p').stop(true,true).fadeIn(400).delay(1500).fadeOut(400).html('手机号格式不正确！');
                    return false;
                }
            },
            success:function(data){
                console.log(data);
            },
            error:function(){},
            complete:function(){}
        });
    });
</script>