Ajax verification implementation method of PHP verification code_PHP tutorial

In order to provide user experience in website development, most of us use ajax to do some operations. Now I will introduce a verification code that uses ajax to achieve non-refreshing pages. Friends in need of ajax verification can refer to it.

I will not introduce the verification code generation program here. You can refer to http://www.bKjia.c0m/phper/phpanqn/46698.htm. Here is a simple

The code is as follows

Copy code

代码如下

复制代码

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; function hexrgb ($hexstr) { $int = hexdec($hexstr); return array( "red" => 0xFF & ($int >> 0x10),                 "green" => 0xFF & ($int >> 0x8),                 "blue" => 0xFF & $int     ); } ?> 验证码

session_start();
//Settings: You can modify the parameters of the verification code image here
$image_width = 120;
$image_height = 40;
$characters_on_image = 6;
$font = './monofont.ttf';

//The following characters will be used for the characters in the verification code
//The number 1 and letter i have been removed to avoid confusion
$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);

/* Set background, text and interference noise */
$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']);

/* Randomly generate interference noise points on the background */
for( $i=0; $i<$random_dots; $i++ ) {
Imagefilledellipse($image, mt_rand(0,$image_width),
mt_rand(0,$image_height), 2, 3, $image_noise_color);
}

/* Randomly generate lines on the background image */
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);
}

/* Generate a text box, and then sketch 6 characters in it */
$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);

/* Display the verification code image on the HTML page */
header('Content-Type: image/jpeg');
//Set the type of image output
imagejpeg($image);
//Display pictures
imagedestroy($image);
//Destroy image instance
$_SESSION['6_letters_code'] = $code;

function hexrgb ($hexstr) {
$int = hexdec($hexstr);

Return array( "red" => 0xFF & ($int >> 0x10),
"green" => 0xFF & ($int >> 0x8),
"blue" => 0xFF & $int
);
}
?> Verification code

After generation, we need to apply it in actual projects. Usually we use ajax to refresh and generate a new verification code when clicking on the verification code (sometimes the generated verification code is difficult to identify with the naked eye), that is, "cannot see clearly and change it to another one" open". After filling in the verification code, you also need to verify whether the verification code is correct. The verification process is completed by a background program, but we can also achieve refresh-free verification through ajax.

How to verify that the verification code is correct or incorrect
The text on the verification code image is stored in the SESSION variable. During verification, we need to compare the value in SESSION with the value entered by the user.

$_SESSION[6_letters_code] – stores the text value of the verification code
$_POST[6_letters_code] – This is the content of the verification code entered by the user

We create a front-end page index.html, load jquery, and add the verification code form element to the body:

The code is as follows

Copy code

代码如下	复制代码
验证码：

Verification code:

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

In the html code,

The code is as follows

Copy code

代码如下	复制代码
$(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("验证码错误！");              }          });      });  });

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

Refreshing the verification code actually means re-requesting the verification code generation program. What should be noted here is that when calling code_num.php, random parameters must be included to prevent caching. Next, after filling in the verification code, click the "Submit" button, and through $.post(), the front end sends an ajax request to the background chk_code.php.

The code is as follows	Copy code
$(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("Verification code is correct!");                    }else{  alert("Verification code is wrong!");                                                                                          }); }); });

Backend chk_code.php verification:

session_start();

The code is as follows

代码如下	复制代码
session_start();    $code = trim($_POST['code']);  if($code==$_SESSION["helloweba_num"]){     echo '1';  }

Copy code

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

echo '1';

} The background completes the verification based on comparing the submitted verification code with the verification code saved in the session.

http://www.bkjia.com/PHPjc/629628.htmlwww.bkjia.com

truehttp: //www.bkjia.com/PHPjc/629628.htmlTechArticleIn order to provide user experience in website development, most of us use ajax to do some operations. Let me introduce an application below. Ajax implements verification code without refreshing the page. Ajax verification friends in need...