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

前言

在不刷新浏览器的状况下，实现页面的刷新。本文采纳 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/