程序猿辉辉


防止表单重复提交

辉辉 2018-07-10 29浏览 0条评论
首页/正文
分享到: / / / /

防止表单重复提交

方法一:前端方式

当点击提交或者保存按钮之后,将按钮置为灰色或者不可点击状态,当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)

alter table 表名 add unique(字段名);

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自定义切入实现方式表单重复提交等等比较高端一点的方式

最后修改:2018-07-10 12:41:41 © 著作权归作者所有
上一篇

评论列表

还没有人评论哦~赶快抢占沙发吧~