通过Ajax异步获取后台验证码 并完成验证 – Falost的小窝
  • 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

通过Ajax异步获取后台验证码 并完成验证

Code Log 神棍 53529℃ 0评论

       前题:前个礼拜写了一个后台php验证码生成的文件,当然只写了后台生成,没有达到我们想要的验证功能,那么今天,我就将这个验证码功能实现完成吧!

先附上后台验证码生成程序吧

文件名:verificationCode.php
   header("Content-Type:image/png");
   header("Cache-Control:no-cache");
   //设置验证码的宽高
   w = 100;    h = 40;
   //要在服务器的内存中创建一个图片;
   img = imagecreate(w,h);    //为图片分配一个背景颜色,RGB(255,255,255)    //2,3,4参数代表RGB,之所以分配180,420,是为了生成一个浅色背景    imagecolorallocate(img,rand(180,240),rand(180,240),rand(180,240));
   //在图上生成一个随机字符
   src = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";    //验证码背景    for(i=0;i<4;i++){
      //生成一个一位的从1-36之间的随机数字
      c = src[rand(1,strlen(src))-1];       //随机得到字符的颜色       color=imagecolorallocate(img,rand(50,170),rand(50,170),rand(50,170));       //第二个参数设置为5代表上边据,10+i*20代表左边距
      imagestring(img,10,10+i*20,10,c,color);
   }
   //生成图片并返回客户端
   imagepng(img);    //清理内存    imagedestroy(img);

以上代码只实现了验证码生成的功能,并没有达到我们想要的效果的,我们都知道验证码是在前台进行敏感操作时进行验证的一个功能,但是我们这里的验证码,并没有达到我们想要的验证效果,那么该怎么在前台进行验证效果呢?

我刚开始的思路是,通过 cookies 来实现,但是那 安全性能好像不好,所以我放弃了他,转战 session 存储来实现。思路如下:

首先将我们生成的验证码通过储存到 session 中,然后在读取出来,通过 ajax 来进行对比。

从上面的代码中,可以看出,这个验证码是通过一个 for 循环,生成了一个4位字符的验证码,没循环一次,生成一位字符,然后在将这4位字符进行拼接输出,达到验证码的效果。这时候,我们就需要先声明下启用 session 存储了,然后,循环生成验证码的时候,将验证码的每一个字符存储到一个字符串中,然后在将这个字符串存储到session中去。

ps:在这一步的时候,我进入了一个误区,导致生成的验证码和储存到 session 中的验证码,永远不能进行匹配成功,除非是那种运气超级棒的人!

需要在以上贴出来的代码上进行修改,修改代码贴上来:

   //首先在页头启用session存储
   session_start();
   //然后声明一个存储这4位验证码的字符串
   verificationCode='';    //在将生成的的每一个字符串进行拼接    for(i=0;i<4;i++){
      verificationCode.=c;
   }
   //将字符串存储到  sessionCode 中
   _SESSION["sessionCode"] = verificationCode;

做完以上工作,那么我们就完成了一半了,已经将我们生成的验证码储存到了 session 中了,接下来,我们需要做的就是如何在前台进行验证了。

这个,我想已经没有什么问题了,直接贴上代码吧!如下:

文件名:verificationCode.html

这里我们在html中调用这个验证码,直接 img 的 src 为我们的后台验证码的文件名

<img id=”rese” src=”securityCode.php” alt=”点击刷新验证码” />
<input id=”code” type=”text” />
<input type=”button” value=”test” />

JS代码如下:

var code=document.getElementById("rese");
code.onclick=changeSecurityCode;
 //当验证码图片被点击的时候,进行图片切换
function changeSecurityCode(){
    //之所以在后面加上一个随机数,是为了防止浏览器读取缓存图片
    code.src="securityCode.php?tm="+Math.random();
}
function yanzheng(){
    var xhr=getXhr();
    var cd=document.getElementById('code').value;
    xhr.open('post','session.php');
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send('validateCode='+cd);
    xhr.onreadystatechange=function(){
        if (xhr.readyState==4&&xhr.status==200)
        {
            var text=xhr.responseText;
            alert(text)
        }
    }
    //当提交验证时,重新生成一个验证码
    changeSecurityCode();
}
function getXhr(){
    // 1 定义一个空对象
    var xhr = null;
    // 2 判断当前浏览器是否支持该核心对象
    if(window.XMLHttpRequest){
        // 当前浏览器支持该对象:其它浏览器
        xhr = new XMLHttpRequest();
    }else{
        // 当前浏览器不支持该对象:IE浏览器
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
}

ajax请求后台代码:

文件名:session.php
session_start();
//注意如此此处存在中文验证码时,用Ajax传值要注意存在中文乱码的问题
validateCode=_POST['validateCode'];
//获取存储在sessionCode值
session=_SESSION['sessionCode'];
if(strtoupper(validateCode)==strtoupper(session)){
//判断文本框中输入的值和$_SESSION中保存的验证码值是否相等
    echo "验证成功";
}else{
    echo "验证失败";
}

到此我们的验证码验证功能就完成了,新人一枚,当中思路如有错误,请多多指教!如有好的思路,也请联系我一起交流学习哦!

欢迎小伙伴们,在下面留言评论哦!

转载请注明:Falost的小窝 » 通过Ajax异步获取后台验证码 并完成验证

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (7)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址