qinyi素材网
当前位置: 首页 > WEB教程 > 使用jQuery ajax异步获取后台验证码案例

使用jQuery ajax异步获取后台验证码案例

  时间: 2021-11-08   阅读:1.6k
简要教程

通过 jQuery AJAX 方法实现异步获取后台验证码,需要先引入jQuery,使用$.post或者$.get方式请求后台。并且在等待的时候前台按钮提示在规定时间内输入验证码,时间过了之后按钮提示“重新发送验证码”。“目标地址”请使用正确的跳转地址,否则ajax请求失败。

使用方法

在HTML中引入jQuery.js

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

HTML结构

<body>
手机号:<input id="mobile"  type="text" name="mobile" value="">
<input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /><br>
验证码:<input id="code"  type="text" name="mobile" value="">
</body>

JavaScript代码

<script>
    var timeController; //timer变量,控制时间
    var count = 5; //间隔函数,1秒执行
    var remainCount;//当前剩余秒数
    function sendMessage() {
        remainCount = count;
        //设置button效果,开始计时
        $("#btnSendCode").attr("disabled", "true");
        $("#btnSendCode").val("请在" + remainCount + "秒内输入验证码");//加上这一句不会出现延迟,否则倒计时延迟1s
        timeController = setInterval("SetRemainTime()", 1000); //启动计时器,1秒执行一次
        //向后台发送处理数据
        var mobile = document.getElementById("mobile").value;

        $.ajax({
            type: "POST", //用POST方式传输       
            url: 'code.php', //目标地址.
            dataType: "json", //数据格式:JSON
            //data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
            data: "&a="+mobile,
            success: function(json){
                    document.getElementById("code").value=json.code;
            }
        });
    }
    //timer处理函数
    function SetRemainTime() {
        if (remainCount==0) {
            clearInterval(timeController);//停止计时器
            $("#btnSendCode").removeAttr("disabled");//启用按钮
            $("#btnSendCode").val("重新发送验证码");
        }
        else {
            remainCount--;
            $("#btnSendCode").val("请在" + remainCount + "秒内输入验证码");
        }
    }
</script>

PHP代码

<?php
echo json_encode(array('code'=>mt_rand(1000,9999)));
?>

效果展示


上一篇: 下一篇: