实现验证码刷新有五种方法：一、AJAX异步更新img src；二、表单提交重生成；三、jQuery简化AJAX；四、Vue响应式绑定；五、Laravel框架集成。
当用户在表单中输入验证码时，若看不清或已过期，需通过点击操作即时刷新验证码图像。以下是实现该交互功能的多种方法：
一、基于AJAX异步刷新验证码图片
该方法不重载页面，仅更新验证码图片的src属性，后端生成新验证码并返回唯一标识或新图片路径，前端动态替换img标签内容。
1、在HTML中为验证码图片设置id，并绑定onclick事件：
<img id="verifyImg" src="get_verify.php" alt="验证码" onclick="refreshVerify()">
2、编写JavaScript函数refreshVerify()，使用XMLHttpRequest发起GET请求到后端接口：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'get_verify.php?r=' + Math.random(), true);
立即学习“PHP免费学习笔记（深入）”；
3、监听onload事件，在响应成功后将xhr.responseURL赋值给verifyImg.src，确保浏览器不缓存旧图：
if (xhr.status === 200) { document.getElementById('verifyImg').src = xhr.responseURL; }
4、后端get_verify.php中调用session_start()，生成4位随机字符串，存入$_SESSION['captcha']，并输出PNG图像流，同时设置Header防止缓存：
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Content-Type: image/png');
二、通过表单提交触发验证码重生成
该方式利用传统表单提交机制，由服务器端重新渲染整个验证码区域，适用于无JavaScript支持的降级场景，且确保会话状态同步更新。
1、在HTML中将验证码图片包裹于form标签内，并添加隐藏字段标记刷新动作：
<form method="post"><input type="hidden" name="refresh_captcha" value="1"><input type="image" src="get_verify.php" alt="换一张"></form>
2、PHP脚本检测POST中是否存在refresh_captcha字段，若存在则清空原验证码session值：
if (isset($_POST['refresh_captcha'])) { unset($_SESSION['captcha']); }
3、在页面加载时统一调用验证码生成逻辑，无论是否提交均执行一次初始化：
if (!isset($_SESSION['captcha'])) { $_SESSION['captcha'] = generateRandomCode(4); }
4、前端img标签的src指向带时间戳参数的get_verify.php，强制每次请求为新资源：
<img src="get_verify.php?t=<?php echo time(); ?>">
三、使用jQuery简化AJAX验证码切换
借助jQuery封装的$.ajax方法降低原生XHR复杂度，提升代码可读性与兼容性，同时支持错误提示与加载状态反馈。
1、引入jQuery库并在页面底部添加script标签定义refreshCaptcha函数。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
2、使用$.get()方法请求get_verify.php，附加随机数防止缓存：
$.get('get_verify.php', { t: new Date().getTime() }, function(data, status) { ... });
3、在回调函数中获取响应头中的X-Captcha-Token（由后端PHP设置），用于后续表单校验：
var token = xhr.getResponseHeader('X-Captcha-Token');
4、将新验证码图片URL写入img元素src属性，并更新关联的隐藏输入框值（如有）：
$('input[name="captcha_token"]').val(token);
$('img#verifyImg').attr('src', 'get_verify.php?t=' + new Date().getTime());
四、Vue.js响应式验证码组件方案
利用Vue的响应式数据绑定机制，将验证码图片URL设为data属性，点击按钮触发方法更新该属性，自动触发视图重绘，无需手动操作DOM。
1、在Vue实例data中声明verifyUrl字段，默认指向初始验证码接口：
data() { return { verifyUrl: 'get_verify.php' }; }
2、模板中绑定img的src为verifyUrl，并绑定click事件调用刷新方法：
<img :src="verifyUrl" @click="updateVerify" />
3、methods中定义updateVerify，使用Math.random()生成新查询参数以绕过缓存：
this.verifyUrl = 'get_verify.php?t=' + Math.random();
4、为增强用户体验，可在updateVerify中添加loading状态控制，例如设置isRefreshing为true，并在v-if中隐藏原图显示加载图标：
<div v-if="isRefreshing">加载中...</div>
五、Laravel框架内置验证码刷新实现
基于laravel/framework与mews/captcha扩展包，利用其提供的Captcha::src()和route自动路由机制，通过命名路由生成新验证码URL，适配CSRF保护机制。
1、安装mews/captcha包并发布配置文件，启用session驱动存储验证码文本：
php artisan vendor:publish --provider='Mews\Captcha\CaptchaServiceProvider'
2、在web.php路由文件中注册验证码刷新路由，使用GET方法并命名：
Route::get('/captcha/{config?}', 'CaptchaController@getCaptcha')->name('captcha.refresh');
3、前端使用Laravel的route()辅助函数生成URL，并绑定到图片click事件：
<img :src="captchaSrc" @click="fetchNewCaptcha" />
其中captchaSrc初始值为{{ route('captcha.refresh', ['default']) }};
4、Vue组件中fetchNewCaptcha方法调用axios.get()请求命名路由，携带当前时间戳参数避免缓存，并将响应data赋值给captchaSrc：
this.captchaSrc = response.data.url + '?t=' + Date.now();
