javascript - jQuery 验证码匹配

Question

在我添加代码以验证匹配不起作用后，我有一个 jQuery 和 php 验证码

这是我的 jQuery 代码

$(document).ready(function() {
$('img#captcha-refresh').click(function() {
    change_captcha();
    });

    function change_captcha(){
        document.getElementById('captcha').src="reCaptcha/get_captcha.php?rnd=" + Math.random();
    }

    var captchascr = $('#captcha').attr('src');

     $('#captcha-code').on('change', function(){
         var captchaval = $(this).val();
            if (captchascr == captchaval) {
                console.log('match');
                }else {
                    console.log('No match');
                    }
         });
});

html

    <div class="captcha-box"> 
        <img src="reCaptcha/get_captcha.php" id="captcha" />
    </div>
    <div class="text-box">
        <label>Type the two words:</label>
        <input name="captcha-code" type="text" id="captcha-code">
    </div>
    <div class="captcha-action">
        <img src="reCaptcha/refresh.jpg" id="captcha-refresh" />
    </div>

这是php代码

session_start();
$word_1 = '';
for ($i = 0; $i < 4; $i++) 
{
    $word_1 .= chr(rand(97, 122));
}
for ($i = 0; $i < 4; $i++) 
{
    $word_2 .= chr(rand(97, 122));
}
$_SESSION['random_number'] = $word_1.' '.$word_2;
$dir = 'fonts/';
$image = imagecreatetruecolor(165, 50);
$font = "recaptchaFont.ttf"; // font style
$color = imagecolorallocate($image, 0, 0, 0);// color
$white = imagecolorallocate($image, 255, 255, 255); // background color white
imagefilledrectangle($image, 0,0, 709, 99, $white);
imagettftext ($image, 22, 0, 5, 30, $color, $dir.$font, $_SESSION['random_number']);
header("Content-type: image/png");
imagepng($image)

这是在 php 文件中创建的 session ，我只是不知道如何调用 session ，所以我进行了匹配，有人可以帮忙吗？

Answer 1

对名为 validate_captcha.php 的新文件进行 AJAX 调用。

文件中用于处理AJAX 调用的PHP 代码

    <?php
    session_start();
    $task       = !empty($_POST['task']) ? $_POST['task'] : null;
    $response   = 'false';
    if ( $task == 'validateCaptha' ){
        $inputCaptcha       = !empty($_POST['inputCaptcha']) ? $_POST['inputCaptcha'] : null;
        $sessionCaptcha     = $_SESSION['random_number'];

        if ($inputCaptcha   == $sessionCaptcha){
            $response   = 'true';
        }else{
            $response   = 'false';
        }
        echo $response; 
        exit();
    }

?>

jQuery AJAX 代码

    $(document).ready(function() {
    $('img#captcha-refresh').click(function() {
        change_captcha();
        });

        function change_captcha(){
            document.getElementById('captcha').src="reCaptcha/get_captcha.php?rnd=" + Math.random();
        }

$('#captcha-code').on('change', function(){
    var inputCaptcha = $(this).val();
    $.ajax({
    url: 'reCaptcha/validate_captcha.php',
    type: 'POST',
    async: false,
    data: {'task':'validateCaptha', 'inputCaptcha':inputCaptcha},
    success: function(response){
        if (response=='true'){
            alert('Match');
        }else{
            alert('Not Match');
        }
    }

});
         });
});

希望对您有所帮助。