关于验证码:图形验证码无痕刷新

前言

在不刷新浏览器的状况下，实现页面的刷新。本文采纳KgCaptcha验证码，实现无痕刷新验证码，上面是总结验证码不同情景下刷新的办法。

01 嵌入式或触发式

// 引入js<script src="captcha.js?appid=XXX" id="KgCaptcha"></script><script>// 初始化kg.captcha({    // 绑定元素，验证框显示区域    bind: "#captchaBox",});</script> <div id="captchaBox"></div>// 刷新验证码<button onclick="kg.reload({bind: '#captchaBox'});">刷新验证码</button>

02 弹窗式

// 引入js<script src="captcha.js?appid=XXX" id="KgCaptcha"></script><script>// 初始化kg.captcha({    // 绑定弹窗按钮    button: "#captchaButton",});</script> <a id="captchaButton">点击弹出验证窗口</a> // 刷新验证码<button onclick="kg.reload({button: '#captchaButton'});">刷新验证码</button>

03 通用式

// 引入js<script src="captcha.js?appid=XXX" id="KgCaptcha"></script><script>    // 初始化    kg.captcha();</script> <div id="captchaDiv"></div>// 刷新验证码<button onclick="kg.reload(kg.param);">刷新验证码</button>

04 param对象为缺省值（嵌入式或触发式）

// 引入js<script src="captcha.js?appid=XXX" id="KgCaptcha"></script><script>    // 初始化    kg.captcha();</script> <div id="captchaDiv"></div>// 刷新验证码<button onclick="kg.reload({});">刷新验证码</button>

05 param对象为缺省值（弹窗式）

// 引入js<script src="captcha.js?appid=XXX" id="KgCaptcha"></script><script>  // 初始化  kg.captcha();</script> <a id="captchaButton">点击弹出验证窗口</a>// 刷新验证码<button onclick="kg.reload({});">刷新验证码</button>

最初

SDK开源地址：https://github.com/KgCaptcha，顺便做了一个演示：https://www.kgcaptcha.com/demo/