JAVAWeb 小技巧-利用验证码防止表单重复提交

表单重复提交有三种情况：

1. 用户刷新页面后重复提交。

   利用重定向可以解决。

2. 网络延迟等原因造成重复的提交。
3. 用户回退浏览器后重新提交。

问题解决思路：

利用自动生成的验证码，当服务器第一次收到用户输入的正确的验证码时，保存验证码。当用户重复提交后，服务器比对验证码，若发现相同的验证码则不给予浏览器回应。

具体使用步骤

谷歌 kaptcha 图片验证码使用步骤

1. 导入谷歌验证码的 kaptcha-2.3.2.jar包
2. 在 web.xml 中配置用于生成验证码的Servlet程序。（kaptcha.jar 包中自带的Servket程序：KaptchaServlet）

<servlet>
    <servlet-name>KaptchaServletservlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServletservlet-class>
servlet>
<servlet-mapping>
    <servlet-name>KaptchaServletservlet-name>
    <url-pattern>/kaptcha.jpg/*url-pattern>
servlet-mapping>
1
2
3
4
5
6
7
8

3. 在表单中使用 img 标签显示验证码图片然后使用。

4. 在服务器中获取谷歌生成的验证码和用户提交的验证码，比对正确与否，然后再使用。

// 获取Session中的验证码
String token = (String)req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
// 删除Session中的验证码
req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);
1
2
3
4

---

细节注意：

问题：有时用户会看不清验证码，所以我们需要设置单击事件，当用户点击验证码就更新一张验证码。

具体代码：

<script type="text/javascript">
    // 页面加载完成之后
    $(function (){
        // 给验证码绑定单击事件
        $("#code_img").click(function () {
            // this 表示当前的 #code_img 
            // this.src 就表示当前的#code_img的路径
            // "$basePath}/kaptcha.jpg"" 也表示路径
            // this.src="$basePath}/kaptcha.jpg"; 表示对当前路径重新赋值，就会重新提交。那么就会更新验证码
            // 为什么要加一个 ?d=" + new Date(); 时间作为参数呢？
                // 因为浏览器会缓存请求，若是每次路径相同，则会直接从浏览器的缓存中获取内容。那验证码就不会改变。（因为没有经过服务器）
                // 然而只要我们每次请求的地址不同，那么浏览器就会正常发送请求。所以我们这里设置了一个时间作为随机的参数，让每次的请求不同。
            this.src="${basePath}kaptcha.jpg?d=" + new Date();
        });
    });
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16