jquery 无刷新验证码

基础概念

jQuery 无刷新验证码是一种在不重新加载整个页面的情况下，实现验证码验证的技术。它通过 AJAX 技术与服务器进行通信，验证用户输入的验证码是否正确。

优势

用户体验：用户无需刷新页面即可完成验证码验证，提高了用户体验。
减轻服务器负担：由于不需要重新加载整个页面，服务器的负担相对减轻。
安全性：仍然可以有效地防止自动化脚本的攻击。

类型

图片验证码：用户需要识别并输入图片中的文字或数字。
滑动验证码：用户需要通过滑动滑块来完成验证。
点击验证码：用户需要按照提示点击图片中的特定区域。

应用场景

注册和登录：在用户注册和登录时，防止机器人注册和登录。
表单提交：在提交表单时，防止恶意提交。
支付验证：在进行支付操作时，确保是真实用户操作。

示例代码

以下是一个简单的 jQuery 无刷新图片验证码示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 无刷新验证码</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="captchaForm">
        <img id="captchaImage" src="captcha.php" alt="验证码">
        <input type="text" id="captchaInput" placeholder="请输入验证码">
        <button type="submit">提交</button>
    </form>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

$(document).ready(function() {
    $('#captchaForm').submit(function(event) {
        event.preventDefault();
        var userInput = $('#captchaInput').val();

        $.ajax({
            url: 'verify_captcha.php',
            method: 'POST',
            data: { captcha: userInput },
            success: function(response) {
                if (response === 'success') {
                    alert('验证码正确！');
                } else {
                    alert('验证码错误，请重试！');
                    $('#captchaImage').attr('src', 'captcha.php?' + new Date().getTime());
                    $('#captchaInput').val('');
                }
            },
            error: function() {
                alert('请求失败，请重试！');
            }
        });
    });
});

PHP (captcha.php)

<?php
session_start();

// 生成验证码
$captcha = substr(md5(uniqid(mt_rand(), true)), 0, 6);
$_SESSION['captcha'] = $captcha;

// 创建图像
$image = imagecreatetruecolor(100, 30);
$bgColor = imagecolorallocate($image, 255, 255, 255);
$textColor = imagecolorallocate($image, 0, 0, 0);

imagefilledrectangle($image, 0, 0, 100, 30, $bgColor);
imagestring($image, 5, 20, 5, $captcha, $textColor);

header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>

PHP (verify_captcha.php)

<?php
session_start();

if (isset($_POST['captcha']) && $_POST['captcha'] === $_SESSION['captcha']) {
    echo 'success';
} else {
    echo 'fail';
}
?>