博客里已经有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的打赏,我们会更加努力! 如果您想成为作者,请点我