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

上一篇文章中讲了如何用 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 的值与用户输入的值作比较，判断是否正确。

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