Home >php教程 >php手册 >PHP验证码之Ajax验证实现方法

PHP验证码之Ajax验证实现方法

WBOY
WBOYOriginal
2016-06-13 10:12:39986browse

在网站开发中为了提供用户体验我们多数都使用ajax来做一些操作,下面我来介绍一个利用ajax实现无刷新页面的验证码ajax验证有需要的朋友可参考。

验证码生成程序我这里就不介绍了,大家可参考http://www.bKjia.c0m/phper/phpanqn/46698.htm 下面介绍一个简单的

 代码如下 复制代码

session_start();
//设置: 你可以在这里修改验证码图片的参数
$image_width = 120;
$image_height = 40;
$characters_on_image = 6;
$font = './monofont.ttf'; 
 
//以下字符将用于验证码中的字符 
//为了避免混淆去掉了数字1和字母i
$possible_letters = '23456789bcdfghjkmnpqrstvwxyz';
$random_dots = 10;
$random_lines = 30;
$captcha_text_color="0x142864";
$captcha_noice_color = "0x142864"; 
 
$code = ''; 
 
$i = 0;
while ($i     $code .= substr($possible_letters, mt_rand(0, strlen($possible_letters)-1), 1);
    $i++;
}
 
$font_size = $image_height * 0.75; 
$image = @imagecreate($image_width, $image_height);
 
/* 设置背景、文本和干扰的噪点 */
$background_color = imagecolorallocate($image, 255, 255, 255);
 
$arr_text_color = hexrgb($captcha_text_color); 
$text_color = imagecolorallocate($image, $arr_text_color['red'], 
$arr_text_color['green'], $arr_text_color['blue']);
 
$arr_noice_color = hexrgb($captcha_noice_color); 
$image_noise_color = imagecolorallocate($image, $arr_noice_color['red'], 
$arr_noice_color['green'], $arr_noice_color['blue']);
 
/* 在背景上随机的生成干扰噪点 */
for( $i=0; $i     imagefilledellipse($image, mt_rand(0,$image_width),
    mt_rand(0,$image_height), 2, 3, $image_noise_color);
}
 
/* 在背景图片上,随机生成线条 */
for( $i=0; $i     imageline($image, mt_rand(0,$image_width), mt_rand(0,$image_height),
    mt_rand(0,$image_width), mt_rand(0,$image_height), $image_noise_color);
}
 
/* 生成一个文本框,然后在里面写生6个字符 */
$textbox = imagettfbbox($font_size, 0, $font, $code); 
$x = ($image_width - $textbox[4])/2;
$y = ($image_height - $textbox[5])/2;
imagettftext($image, $font_size, 0, $x, $y, $text_color, $font , $code);
 
/* 将验证码图片在HTML页面上显示出来 */
header('Content-Type: image/jpeg');
// 设定图片输出的类型
imagejpeg($image);
//显示图片
imagedestroy($image);
//销毁图片实例
$_SESSION['6_letters_code'] = $code;
 
function hexrgb ($hexstr) {
    $int = hexdec($hexstr);
 
    return array( "red" => 0xFF & ($int >> 0x10),
                "green" => 0xFF & ($int >> 0x8),
                "blue" => 0xFF & $int
    );
}
?>

验证码

生成后,我们要在实际的项目中应用,通常我们使用ajax可以实现点击验证码时刷新生成新的验证码(有时生成的验证码肉眼很难识别),即“看不清换一张”。填写验证码后,还需要验证所填验证码是否正确,验证的过程是要后台程序来完成,但是我们也可以通过ajax来实现无刷新验证。

验证验证码正确或错误的方法
验证码图片上的文字被存放到了SESSION 变量里面,验证的时候,我们需要将SESSION 里面的值和用户输入的值进行比较即可。

$_SESSION[6_letters_code] – 存放着验证码的文字值
$_POST[6_letters_code] – 这是用户输入的验证码的内容


我们建立一个前端页面index.html,载入jquery,同时在body中加入验证码表单元素:

 代码如下 复制代码

验证码:  
PHP验证码之Ajax验证实现方法

 

 

html代码中,PHP验证码之Ajax验证实现方法

 代码如下 复制代码

$(function(){ 
    //数字验证 
    $("#getcode_num").click(function(){ 
        $(this).attr("src",'code_num.php?' + Math.random()); 
    }); 
    ... 
}); 

刷新验证码,其实就是重新请求了验证码生成程序,这里要注意的是调用code_num.php时要带上随机参数防止缓存。接下来填写好验证码之后,点“提交”按钮,通过$.post(),前端向后台chk_code.php发送ajax请求。

 代码如下 复制代码

$(function(){ 
    ... 
    $("#chk_num").click(function(){ 
        var code_num = $("#code_num").val(); 
        $.post("chk_code.php?act=num",{code:code_num},function(msg){ 
            if(msg==1){ 
                alert("验证码正确!"); 
            }else{ 
                alert("验证码错误!"); 
            } 
        }); 
    }); 
}); 


后台chk_code.php验证:

 代码如下 复制代码

session_start(); 
 
$code = trim($_POST['code']); 
if($code==$_SESSION["helloweba_num"]){ 
   echo '1'; 

后台根据提交的验证码与保存在session中的验证码比对,完成验证。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn