使用AJAX和PHP的GD库自定义一个验证码教研全过程

最新推荐文章于 2022-12-19 11:26:48 发布

Byte_Dance

最新推荐文章于 2022-12-19 11:26:48 发布

阅读量242

点赞数

分类专栏： JS PHP HTML

本文链接：https://blog.csdn.net/Byte_Dance/article/details/80549735

版权

JS 同时被 3 个专栏收录

72 篇文章 1 订阅

订阅专栏

PHP

23 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

HTML静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码页面</title>
    <style>
        img{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div>
    验证码图片:
    <img src="http://localhost/test/yanZhengMa.php" alt="" id="imageCode" 
οnclick="document.getElementById('imageCode').src='http://localhost/test/yanZhengMa.php'">
</div>
    <form method="get">
        <!--由于一个文本框会导致表单按一下回车键自动提交,所以添加一个隐藏文本框-->
        <input id="hiddenText" type="text" style="display:none" />

        <input type="text" name="inCode" id="ipt" οnkeyup="searchenter1(event);">
        <input type="button" value="提交" id="name" name="" οnclick="ppp()">
        <!--<input type="button" value="按钮" id="name" name="">-->


    </form>

<script>

    function searchenter1(event) {
        event = event || window.event;
        if (event.keyCode === 13) {
            ppp();
        }
    }
    //异步AJAX取到验证码的值
    function ppp(){

        //AJAX开始
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else
        {// IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {

        //将AJAX获取到的验证码字符串赋值给一个变量 ,并把它转换为小写
        content = document.getElementById("name").name = xmlhttp.responseText;

val = document. getElementById ( "ipt" ). value ; content = content . toLocaleUpperCase () ; val = val . toLocaleUpperCase () ; if ( content !== val ){ alert ( "验证码错误" ) ; return false ; } else { // window.location.href = "http://www.baidu.com"; window.location = "http://localhost/test/YanZhengMa2.html" ; } } } xmlhttp. open ( "GET" , "http://localhost/test/returnCode.php" , true ) ; xmlhttp. send () ; //AJAX结束 } </script> </body> </html>

生成验证码图片的PHP文件

<?php
    session_start();

    //新建一个画布
    $huabu = imagecreatetruecolor(200,60);

    //创建色板
    $white = imagecolorallocate($huabu,255,255,255) ;
    $black = imagecolorallocate($huabu,0,0,0);
    $red = imagecolorallocate($huabu,255,0,0);
    $chengse = imagecolorallocate($huabu,255,100,0);
    $skyblue = imagecolorallocate($huabu,0,255,255);
    $green = imagecolorallocate($huabu,0,255,0);
    $purple = imagecolorallocate($huabu,150,50,255);

    $colors = array($black,$red,$chengse,$skyblue,$green,$purple,);

    //输出字母
    imagefill($huabu,0,0,$white);   //画布填充为白色
    imagerectangle($huabu,0,0,199,59,$black);         //设置一个矩形框;


    $strarr = range("A","Z");   //创建一个A-Z的字符串数组

    $pianyi = 30;
    $text = "";
    for($i = 0;$i<4;$i++){
        global $pianyi;
        global $text;
        $char = $strarr[mt_rand(0,25)];
        imagettftext($huabu,20,mt_rand(0,70),$pianyi,40,$colors[mt_rand(0,6)],"fonts/Sitka.ttc",$char);
        $pianyi +=30;
        $text.=$char;
    }
    for($i = 0;$i<10;$i++){
        imageline($huabu,mt_rand(0,200),mt_rand(0,60),mt_rand(0,200),mt_rand(0,60),$colors[mt_rand(0,6)]);
    }
    for($i = 0;$i<500;$i++){
        imagesetpixel($huabu,mt_rand(0,200),mt_rand(0,60),$colors[mt_rand(0,6)]);
    }

    $_SESSION["textCode"] = $text;


    //修改文件图像输出编码方式
    header("content-type:image/png");

    //输出图片
    imagepng($huabu);

    //销毁画布
    imagedestroy($huabu);
?>

AJAX获取到的验证码字符串PHP文件

<?php
session_start();
echo $_SESSION["textCode"];
?>

验证通过后进入一个新的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码页面</title>
</head>
<body>
恭喜您,提交成功!
</body>
</html>

Byte_Dance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用AJAX和PHP的GD库自定义一个验证码教研全过程

HTML静态页面&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;验证码页面&lt;/title&gt; &lt;style&gt; img{ c
复制链接

扫一扫

专栏目录