防止表单重复提交

Posted 2022-02-12 gathub

嘿，大家好，今天我来介绍几种简单的防止表单重复提交的方法：

防止表单重复提交：

方法一：前端方式

当点击提交或者保存按钮之后，将按钮置为灰色或者不可点击状态，当Ajax回调之后，将按钮恢复

1.点击保存，进入保存的方法中，加上下面这个，将按钮置为不可点击状态

$("input.submitbutton").val("正在保存请稍后。。。。。。")
$("input.submitbutton").attr("disabled","disabled");

2.当保存的Ajax回调成功恢复按钮状态，或者不需要直接刷新页面就好

$("input.submitbutton").removeAttr("disabled");
$("input.submitbutton").val("保存");

缺点：当用户通过刷新页面方式，或使用postman等工具绕过前段页面仍能重复提交表单。因此不推荐此方法。

---

方法二：后端方式

给数据库中需要的字段增加唯一键约束（简单粗暴），然后在后端捕获异常，通过try...catch的方式返回异常信息

1.修改数据库，给需要的字段增加唯一约束（注：如果此时数据库中存在该字段的重复数据，则sql会执行不成功，需要你删除重复数据后执行sql）

2.在后端insert保存数据的位置，使用try...catch...代码块，捕获DuplicateKeyException异常，在catch中直接返回

    @RequestMapping(value = "/saveUserPojo", method = RequestMethod.GET)
    @ResponseBody
    public Object saveUserPojo() 
        Map<String, Object> resultMap = new HashMap<String, Object>();

        UserPojo userPojo = new UserPojo("1", "程序猿辉辉", 23);
        try 
            repeatedSubmitService.insert(userPojo);
         catch (DuplicateKeyException e) 
            resultMap.put("code", "400");
            resultMap.put("message", "请勿重复提交！！！");
        

        resultMap.put("code", "200");
        resultMap.put("message", "保存成功");

        return resultMap;
    

3.在ajax回调函数用输出message（请勿重复提交！！！）

---

像上面的的两种方法是比较简单的方式，可以结合起来使用。另外防止表单重复提交的方式还有好多，比如利用Session防止表单重复提交，使用AOP自定义切入实现方式表单重复提交等等比较高端一点的方式，有兴趣的小伙伴可以尝试一下，有空我也在好好研究一下，大家共同学习进步，嘿嘿！

---

未完待续。。。 

---

今天的更新到这里就结束了，拜拜！！！

感谢一路支持我的人，您的关注是我坚持更新的动力，有问题可以在下面评论留言或随时与我联系。。。。。。
QQ：850434439
微信：w850434439
EMAIL：[email protected]

---

如果有兴趣和本博客交换友链的话，请按照下面的格式在评论区进行评论，我会尽快添加上你的链接。

---

网站名称：GatHub-HongHui‘S Blog
网站地址：https://www.gathub.cn/
网站描述：不习惯的事越来越多，但我仍在前进…就算步伐很小，我也在一步一步的前进。
网站Logo/头像：[头像地址]