使用AJAX和PHP的GD库自定义一个验证码教研全过程_php接收ajax数据用gd生成图片-优快云博客

本文链接：https://blog.youkuaiyun.com/Byte_Dance/article/details/80549735

本文介绍了一个简单的验证码生成及验证流程，包括使用HTML、AJAX进行前端页面设计，PHP负责生成验证码图片，以及如何通过AJAX获取验证码并进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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" 
onclick="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" onkeyup="searchenter1(event);">
        <input type="button" value="提交" id="name" name="" onclick="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>