創建按鈕，刷新驗證碼

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已更改。還有其他方法可以實現這一點，但我認爲這是最簡單的方法。

快樂編碼。