### 前言

在不刷新浏览器的情况下，实现页面的刷新。本文采用KgCaptcha验证码，实现无痕刷新验证码，下面是总结验证码不同情形下刷新的方法。

![](http://img.blog.itpub.net/blog/2023/05/05/ffaaeeaeae092129.png?x-oss-process=style/bb)

#### **01 嵌入式或触发式**

```html
// 引入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 弹窗式

```html
// 引入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 通用式

```html
// 引入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对象为缺省值（嵌入式或触发式）

```html
// 引入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对象为缺省值（弹窗式）

```html
// 引入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://github.com/KgCaptcha)，顺便做了一个演示：[https://www.kgcaptcha.com/demo/](https://www.kgcaptcha.com/demo/)

ITPub博客

图形验证码无痕刷新

最新文章