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

最新推荐文章于 2024-06-22 11:52:51 发布

W.pc

最新推荐文章于 2024-06-22 11:52:51 发布

阅读量429

点赞数

分类专栏： javaweb 文章标签： servlet java 前端

本文链接：https://blog.csdn.net/m0_59586434/article/details/126760752

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何防止表单重复提交的两种常见情况及解决方案。一种是利用重定向避免用户刷新页面后的重复提交，另一种是通过使用谷歌kaptcha图片验证码，在服务器端对比验证码来防止网络延迟导致的重复提交。详细步骤包括导入kaptcha库，配置Servlet，显示验证码图片，并在用户点击时更新验证码。同时，文章提醒注意处理用户看不清验证码的情况，确保用户体验。

摘要由CSDN通过智能技术生成

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

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

利用重定向可以解决。
网络延迟等原因造成重复的提交。
用户回退浏览器后重新提交。

问题解决思路：

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

具体使用步骤

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

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

<servlet>
    <servlet-name>KaptchaServlet</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>KaptchaServlet</servlet-name>
    <url-pattern>/kaptcha.jpg/*</url-pattern>
</servlet-mapping>

在表单中使用 img 标签显示验证码图片然后使用。
在服务器中获取谷歌生成的验证码和用户提交的验证码，比对正确与否，然后再使用。

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

细节注意：

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

具体代码：

<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>