javascript动态验证码异步获取的核心是用fetch或xmlhttprequest请求/captcha接口，通过时间戳防缓存更新img.src，绑定click事件实现点击刷新，并处理onerror错误及配合表单校验。
在 JavaScript 中实现动态验证码的异步获取，核心是通过 fetch（推荐）或 XMLHttpRequest 向后端请求一张验证码图片（通常是 /captcha 接口），并把返回的图片数据（或图片 URL）动态插入到页面中，同时支持点击刷新。关键点在于：避免缓存、更新图片 src、绑定事件、处理错误。
1. 基础实现：用 fetch 获取验证码 URL 并更新 img 标签
后端通常返回一个包含验证码图片地址（如 data:image/png;base64,...）或直接返回可访问的 URL（如 /api/captcha?ts=171...<font color="red"> </font>）。最常用的是后者——动态生成带时间戳的 URL 防止浏览器缓存：
- 给
<img id="captcha-img">设置初始src，例如/api/captcha?ts=+new Date().getTime() - 每次点击刷新时，重新生成带新时间戳的 URL，并赋值给
img.src，浏览器会自动发起新请求 - 无需等待
fetch返回图片二进制数据，除非后端要求用 POST 获取 base64 图片（较少见）
2. 防缓存的关键：时间戳或随机数必须更新
如果只写 img.src = '/api/captcha'，浏览器可能复用缓存，导致验证码不刷新。正确做法是强制添加唯一查询参数：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
推荐用时间戳：
img.src = '/api/captcha?ts=' + Date.now() - 也可用随机数：
img.src = '/api/captcha?r=' + Math.random() - 注意：不要在 URL 后拼接空格或非法字符；确保后端能忽略该参数，只负责生成新验证码
3. 点击刷新 + 错误处理（网络失败/验证码过期）
用户点击图片时应重载验证码，同时对异常做友好提示：
- 监听
click事件，在回调中更新img.src - 监听
img.onerror，当图片加载失败（如 404、500、跨域）时，显示提示并尝试重试（或禁用按钮几秒） - 可配合一个 loading 状态（如加灰、显示“加载中”文字），提升体验
4. 进阶：配合输入框与校验（可选）
动态验证码常用于登录/注册表单。此时建议：
- 每次刷新验证码时，清空用户已输入的验证码文本（
input.value = ''），避免旧码残留 - 将验证码 ID（如后端返回的
captchaId）存在 hidden input 或变量中，提交时一并发送，供后端比对 - 若后端返回 JSON（如
{ code: 200, data: { img: '...', id: 'abc123' } }），则需用fetch解析响应再设置img.src
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
