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

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

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

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

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

代码:

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#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 代码:

1
2
3
4
5
6
7
session_start();
$code_num = trim($_POST['code']);
if($code_num == $_SESSION["code"]){
echo 'yes';
}else{
echo 'no';
}

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

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