Question

我根据教程创建了验证码。本教程使用主页面中的会话变量和单独的php文件（用于创建验证码图像）来创建验证码。本教程使用rand（）创建代码，使用substr（）修改它。这是本教程的link。

检查验证码，教程使用我不太懂的请求，因为我刚接触php，javascript和jquery编码。所以，我做的是我创建了一个函数，它附加一个数组的元素，然后将它放在一个会话变量中。然后在单独的php文件中，我删除了rand（）和substr（）并使用会话变量作为代码。我还在用于验证的图像的data-attr-captcha中保存我的数组中的代码值。

现在，我想创建一个“刷新验证码按钮”，但我无法弄清楚该怎么做。我需要在php或javascript上做吗？我想自己做，而不是依靠reCaptcha。

令人沮丧的是我无法在单独的php文件中添加任何内容

这里是我的相关php代码：

$_SESSION["security_code"] = createCaptchaImg();

function createCaptchaImg(){
    $strArr = array("1","2","3","4","5","6",
                    "7","8","9","0","a","b",
                    "c","d","e","f","g","h",
                    "i","j","k","l","m","n",
                    "o","p","q","r","s","t",
                    "u","v","w","x","y","z");
    $captchaLen = 5;
    for($x = 0; $x < $captchaLen; $x++){
        $y = $strArr[rand(0, sizeOf($strArr))];
        $captchaTxt .= $y;

    }

    return $captchaTxt;
}

单独的php文件：

<?php
//Start the session so we can store what the security code actually is
session_start();
//Send a generated image to the browser 
create_image(); 
exit(); 

function create_image(){

    $security_code = $_SESSION["security_code"];

    //Set the image width and height 
    $width = 100; 
    $height = 20;  

    //Create the image resource 
    $image = ImageCreate($width, $height);  

    //We are making three colors, white, black and gray 
    $white = ImageColorAllocate($image, 255, 255, 255); 
    $black = ImageColorAllocate($image, 0, 0, 0); 
    $grey = ImageColorAllocate($image, 204, 204, 204); 

    //Make the background black 
    ImageFill($image, 0, 0, $black); 

    //Add randomly generated string in white to the image
    ImageString($image, 60 , 30, 3, $security_code, $white); 

    //Throw in some lines to make it a little bit harder for any bots to break 
    //ImageRectangle($image, 0, 0, $width-1, $height-1,$grey); 
    imageline($image, 0, $height/2, $width, $height/2, $grey);
    imageline($image, $width/2, 0, $width/2, $height, $grey);

    //Tell the browser what kind of file is come in 
    header("Content-Type: image/jpeg");

    //Output the newly created image in jpeg format 
    ImageJpeg($image);

    //Free up resources
    ImageDestroy($image);
}
function createCaptchaImg(){
    $strArr = array("1","2","3","4","5","6",
                    "7","8","9","0","a","b",
                    "c","d","e","f","g","h",
                    "i","j","k","l","m","n",
                    "o","p","q","r","s","t",
                    "u","v","w","x","y","z");
    $captchaLen = 5;
    for($x = 0; $x < $captchaLen; $x++){
        $y = $strArr[rand(0, sizeOf($strArr))];
        $captchaTxt .= $y;

    }

    return $captchaTxt;
}

?>

图像和刷新按钮：

<div class="form-group">
        <label for="regCaptchaImg" class="col-lg-2 col-lg-offset-3 col-md-2 col-md-offset-3 col-sm-2 col-sm-offset-3 fsForm text-right"  id="regContCaptchaVal">Captcha Image</label>
        <div id="regContCaptchaImg" class="col-lg-3 col-md-3 col-sm-3 fcBlack">
            <img class="ll-error-form"  data-attr-captcha="<?php echo $_SESSION["security_code"];?>" id="regCaptchaImg2" name="regCaptchaImg2" src="cms/createCaptchaImg.php">
            <input type="button" src="cms/refresh.png" id="captchaRefresh" style="" onclick="" class="col-lg-3 col-md-3 col-sm-3 bRxSi">
        </div>
    </div>
    <div class="form-group">
        <label for="regCaptchaCode" class="col-lg-2 col-lg-offset-3 col-md-2 col-md-offset-3 col-sm-2 col-sm-offset-3 fsForm text-right"  id="regLblCaptcha">Captcha Code</label>
        <div id="regContCaptchaCode" class="col-lg-3 col-md-3 col-sm-3 fcBlack"> 
            <input name="regCaptchaCode" id="regCaptchaCode" type="text" class="form-control-c ll-error-form bRxSi" required>
        </div>
    </div>

Answer 1

您需要一个JavaScript（在您的情况下，jQuery）函数，它可以完成两件事：

用新图像替换当前图像。
替换data-attr-captcha属性。

要完成此操作，刷新按钮应发出清除当前$_SESSION['security_code']的请求。如果此请求成功，则jQuery应触发HTTP请求以替换映像。

我没有完整的代码库，但我会给你一个一般的例子。

$(".captchaRefresh").on('click', function(event) {
    $.ajax("cms/new-captcha.php").done(function(data, textStatus, jqXHR) {
        $("#regCaptchaImg2")
            // Replace old captcha code.
            .attr('data-attr-captcha', data)
            // Reload captcha image.
            .attr('src', "cms/createCaptchaImg.php?code=" + data);
    });
});

您的cms/new-captcha.php文件应该是这样的。

$_SESSION["security_code"] = createCaptchaImg();
echo $_SESSION["security_code"];

.on('click')对cms/new-captcha.php的调用会创建新的验证码并将其存储到会话中。它回显了新代码，由JavaScript作为data接收，然后设置为属性。然后jQuery还会重新加载验证码图像。 ?code=请求参数是无关紧要的，我只是添加了该参数，以便浏览器看到URL已更改。还有其他方法可以实现，但我认为这是最简单的方法。

快乐的编码。

创建刷新验证码的按钮

1 个答案: