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

发布:smiling　来源: PHP粉丝网　添加日期：2014-08-22 15:21:56　浏览: 评论：0　

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

下面介绍一个简单的PHP验证码,代码如下:

<?php

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 < $characters_on_image) {

    $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<$random_dots; $i++ ) {

    imagefilledellipse($image, mt_rand(0,$image_width),

    mt_rand(0,$image_height), 2, 3, $image_noise_color);

}



/* 在背景图片上，随机生成线条 */

for( $i=0; $i<$random_lines; $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;

//开源代码phpfensi.com

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中加入验证码表单元素,代码如下:

<p>验证码：<input type="text" class="input" id="code_num" name="code_num" maxlength="4" />

<img src="code_num.php" id="getcode_num" title="看不清，点击换一张" align="absmiddle"></p>

<p><input type="button" class="btn" id="chk_num" value="提交" /></p>

html代码中,<img src="code_num.php"即调用了生成的验证码,当点击验证码时,刷新生成新的验证码,代码如下:

$(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("验证码错误！");

            }

        });

    });

});