当前位置：首页 > JavaScript

js实现验证码刷新

2026-01-30 20:01:27JavaScript

实现验证码刷新的方法

在JavaScript中实现验证码刷新通常涉及前端与后端的交互。以下是常见的实现方式：

基础实现方案

创建HTML元素放置验证码图片，并添加刷新按钮：

<img id="captchaImage" src="/captcha" alt="验证码">
<button id="refreshCaptcha">刷新验证码</button>

添加JavaScript事件处理：

js实现验证码刷新

document.getElementById('refreshCaptcha').addEventListener('click', function() {
    const captchaImage = document.getElementById('captchaImage');
    captchaImage.src = '/captcha?t=' + new Date().getTime();
});

防止缓存的处理

在请求URL后添加时间戳参数可以避免浏览器缓存：

function refreshCaptcha() {
    const img = document.getElementById('captchaImg');
    img.src = '/api/captcha?' + Date.now();
}

结合AJAX的实现

如果需要获取更多验证码相关信息：

js实现验证码刷新

function refreshCaptcha() {
    fetch('/api/captcha', {
        method: 'GET',
        headers: {
            'Cache-Control': 'no-cache'
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('captchaImage').src = data.imageUrl;
        document.getElementById('captchaToken').value = data.token;
    });
}

完整示例代码

HTML部分：

<div class="captcha-container">
    <img id="captchaImg" src="/captcha" alt="验证码">
    <button type="button" onclick="refreshCaptcha()">
        <i class="refresh-icon">↻</i>
    </button>
    <input type="hidden" id="captchaToken" name="captchaToken">
</div>

JavaScript部分：

function refreshCaptcha() {
    const timestamp = new Date().getTime();
    const captchaImg = document.getElementById('captchaImg');

    // 添加随机参数防止缓存
    captchaImg.src = `/captcha?t=${timestamp}`;

    // 如果需要获取新的token
    fetch(`/api/captcha/token?t=${timestamp}`)
        .then(res => res.json())
        .then(data => {
            document.getElementById('captchaToken').value = data.token;
        });
}