ajas php 验证码_php生成验证码及原生js进行ajax验证

博客里已经有3篇此类文章了，我使用的方法里很多都借鉴了这3篇，只是ajax验证尝试使用原生js实现而不是jQuery，如果有错误的地方请指正；

首先生成验证码的页面：ptest.php

session_start();

$str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';

$img = imagecreate(60, 30);

$bg_color = imagecolorallocate($img, 255, 255, 255); //背景颜色

$text_color = imagecolorallocate($img, 0, 0, 0); //文本颜色

$captcha = []; //初始化验证码文本数组

$x_offset = rand(6, 8); //文本在背景上的水平偏移量

for ($i = 0; $i <= 3; $i++) { //4个验证码

$captcha[$i] = $str[mt_rand(0, strlen($str) - 1)]; //为数组中4个元素随机赋值

$font = 'times.ttf'; //引入字体，增加一点样式。。。

$y_offset = rand(14, 22); //文本在背景上的垂直偏移量

imagettftext($img, 14, 0, $x_offset, $y_offset, $text_color, $font, $captcha[$i]); //在背景上写入文本

$x_offset += rand(12, 14); //每循环一次，改变水平偏移量

}

$_SESSION['captcha_str'] = strtolower(implode($captcha)); //存入session

header('Content-type:image/png');

imagepng($img); //输出png图片

imagedestroy($img); //释放与$img相关的内存

ajax验证页面：jsajax.html

jsajax

var imgBtn = document.getElementById("img-btn");

var imgBtnVal = imgBtn.getAttribute("src"); //获取img中src的路径

var iCaptcha = document.getElementById("i-captcha");

var iCaptchaVal = null; //验证码输入框的value值

var subBtn = document.getElementById("sub-btn");

iCaptcha.οnblur=function(){

iCaptchaVal = iCaptcha.value; //在输入框输入验证码后，获取value值

}

imgBtn.οnclick=function(){

this.setAttribute("src", imgBtnVal+"?"+Math.random()); //点击刷新验证码

}

subBtn.οnclick=function(){

var xhr = new XMLHttpRequest(); //提交后初始化一个XMLHttpRequest对象,(暂时不做兼容性，只实现功能)

xhr.open("get", "js-check-captcha.php?yzm=" + iCaptchaVal, false); //启动一个请求

xhr.send(null); //发送请求，url中已有数据，所以这儿是null

if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { //200表示响应成功返回，别的不是很明白

xhr.responseText == 1 ? alert("验证成功") : alert("验证失败"); //根据js-check-captcha.php页面返回值的不同进行不同的操作

}

}

最后判断页面：js-check-captcha.php

session_start();

if (isset($_GET['yzm'])) {

if( strtolower(trim($_GET['yzm'])) == $_SESSION['captcha_str'] ) { //判断get到的值和session中的值是否相等

echo 1;

} else {

echo 0;

}

}

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/10274.html

微信打赏

支付宝打赏

感谢您对作者homer的打赏，我们会更加努力！    如果您想成为作者，请点我