创建按钮，刷新验证码

Question

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

检查验证码，教程使用的请求，我不明白，因为我是新的编码在PHP，JavaScript和jQuery的。所以，我做了什么是我创建了一个函数，追加数组的元素，然后把它放在一个会话变量。然后在单独的php文件中，我删除了rand（）和substr（），并使用会话变量作为代码。我还将用于验证的图像的data-attr-captcha中的数组中的代码值保存起来。

现在，我想创建一个“刷新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）函数做两件事情：

1. 替换当前的图像以崭新的形象。
2. 取代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已更改。还有其他方法可以实现这一点，但我认为这是最简单的方法。

快乐编码。