PHP调用JS实现验证码刷新，点击切换验证码-php教程-PHP中文网

php生成验证码必须用动态脚本（如captcha.php）输出图片并设置防缓存头，html中img的src须指向该脚本并加随机参数破缓存，js点击时更新src，校验时需trim和统一大小写比对session中的验证码。

php调用js实现验证码刷新，点击切换验证码

PHP后端生成验证码图片并输出

验证码图片得由PHP脚本动态生成，不能直接写死路径。常见错误是把验证码图片写成静态文件（比如 captcha.png），导致点击刷新时浏览器缓存旧图、不触发PHP逻辑。

正确做法是用一个独立PHP脚本（如 captcha.php）负责生成并输出图片，同时设置防缓存头：

header('Content-Type: image/png');
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Expires: Mon, 01 Jan 1990 00:00:00 GMT');

// 生成4位随机字符
$code = substr(str_shuffle('ABCDEFGHKLMNPRSTUVWXYZ23456789'), 0, 4);
$_SESSION['captcha_code'] = strtolower($code);

// 绘制PNG图片（略去具体GD绘图代码）
$image = imagecreate(120, 40);
imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 50, 50, 50);
imagestring($image, 5, 20, 15, $code, $text_color);
imagepng($image);
imagedestroy($image);

HTML中img标签src指向PHP脚本

前端的 <img> 标签必须把 src 设为 captcha.php，而不是固定图片路径。否则JS改 src 只会反复加载同一张缓存图。

关键点在于每次刷新都要让URL“看起来不同”，靠加时间戳或随机参数破缓存：

jm-jsjkxyjs02-pzl-803

查询全球任意城市的实时天气和未来天气预报

下载

<img id="captcha-img" src="captcha.php?r=1" alt="验证码">
点击时JS更新 src 为 captcha.php?r=+new Date().getTime() 或 Math.random()
PHP端不用读取 r 参数，它只起破缓存作用

JS点击事件触发验证码重载

监听点击事件，更新 <img> 的 src 属性即可。注意别漏掉 event.preventDefault()（如果绑定在 <a></a> 上），也别用 location.reload() 全页刷新——那会丢表单数据。

典型写法：

document.getElementById('captcha-refresh').onclick = function(e) {
    e && e.preventDefault();
    const img = document.getElementById('captcha-img');
    img.src = 'captcha.php?r=' + Date.now(); // 或 Math.random()
};

常见坑：