使用 AJAX 刷新、验证 PHP 图片验证码

2016-02-08
1分钟阅读时长

上一篇文章中讲了如何用 PHP 生成图片验证码,今天给大家讲一下如何使用 AJAX 刷新验证码和验证输入是否正确。

通常我们使用 AJAX 实现点击验证码时刷新生成新的验证码,即“看不清换一张”。填写验证码后,还需要验证所填验证码是否正确,验证的过程是要后台程序来完成,但是我们也可以通过 AJAX 来实现无刷新验证。

我们首先创建一个 index.html 页面,引入 jQuery 文件,同时在 body 中加入表单元素:

验证码:看不清,点击换一张

在html中使用即可调用验证码,当点击验证码时刷新验证码。

代码:

$("#img_code").live('click',function(){
    $("#img_code").attr("src",'./img_code.php?' + Math.random());
});

注: 请求 img_code.php 时要带上随机参数防止浏览器缓存。

刷新验证码,其实就是重新请求了生成验证码的php文件。接下来填写好验证码之后,点“提交”按钮,通过 $.post() 向 check_code.php 发送 AJAX 请求。

$("#check_code").live('click',function(){
    var code_num = $("#code").val();
    if(code_num == ''){
        alert('验证码不能为空!');
        return false;
    }
    $.post("check_code.php",{"code":code_num},function(msg){
       if(msg=='yes'){
           alert("验证码正确!");
       }else{
           alert("验证码错误!");
       }
});

check_code.php 代码:

session_start();
$code_num = trim($_POST['code']);
if($code_num == $_SESSION["code"]){
    echo 'yes';
}else{
    echo 'no';
}

check_code.php 文件根据 session 的值与用户输入的值作比较,判断是否正确。

这是一篇过去很久的文章,其中的信息可能已经有所发展或是发生改变。

本文作者:她和她的猫
本文地址https://her-cat.com/posts/2016/02/08/php-ajax-image-captcha/
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!