создать кнопку, которая обновит капчу

Question

Я создал капчу на основе учебника. в учебнике используется переменная сеанса на главной странице и отдельный файл php (для создания изображения captcha) для создания captcha. в руководстве используется 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 который создает новый код капчи и сохраняет его на сессии. Это echos новый код, который получен JavaScript как data, а затем установите для этого атрибута. Затем jQuery также перезагрузит изображение captcha. Параметр запроса ?code= является посторонним, я добавляю только это, чтобы браузер видел, что URL-адрес изменился. Есть и другие способы достижения этого, но я вижу это как самый простой метод.

Счастливое кодирование.