9 个回答

所有“通过前台JS,约束提交行为本身不会重复发生”的答案都是彻底错误的。

弱网络时如果POST请求到达了服务器响应却没回去,此时客户端报浏览器原生的超时错误,访客按F5重发,你的JS如之奈何?!

JS阻止重复点击按钮,仅仅是“锦上添花”的体验改进而已,根本称不上“防重复提交”的可靠方案。事实上我们也根本做不到“防止用户重复提交”——HTTP请求的到达能拦的了吗?这个需求的本质是:如何让重复提交的内容能够被识别出来(从而不被重复处理)

重复提交的鉴别,无非两种思路:

  1. 比对内容相同的提交是否重复出现。
  2. 为每次提交标号,比对相同编号的提交是否重复出现。

而其中(1)又是等同于(2)的。因为提交不可能全量比较,只可能计算一个哈希值(MD5等)去比,这样无非就是依赖提交的内容做了一个标号。

HTTP协议是无状态的,不能从HTTP协议本身下手,所以自然要在业务层加上这个标号。

考虑清楚前提,办法就容易了。用种种手段把表单标上号就可以。不限于以下方法:

  • 服务器下发表单时,在表单里附加一个毫秒时间戳或唯一ID
  • 客户端JS在表单内,插入点按提交按钮的时间戳,以及浏览器的信息
  • 服务器端收到表单时,对表单的内容做哈希签名并缓存
  • 有些业务逻辑天生就是防重复的。例如订单的状态流转,一般都是单向、不重复且不可逆的。此时要充分利用业务逻辑,尽量在直接回弹不合法请求的同时,就把重复提交顺手一起干掉。

后端生成token,保存数据前验证

楼上说得都很好了,补充下,除了使用token进行校验外,还可以使用POST-Redirect-GET(PRG)的方式——最后呈现给用户的是一个GET的页面,即使用户按F5刷新页面也不会导致重复提交表单。

参考一下:表单令牌

PHP生成表单时设置一个token隐藏域,提交后JS则可以辅助把提交按钮设为不可点击.
提交表单时进行验证,相同则写入数据库并生成新的token.
token生成算法,比如:

$token = sha1(uniqid(mt_rand(), true));

uniqid获取一个带前缀(mt_rand),末尾带熵(true),基于当前时间微秒数的唯一编号.mt_rand用于生成更好的随机数.

作为一名Python程序猿,使用Django框架时,直接在模板里面,在

里面直接加上{% csrf_token %}

在第一次提交之后设置一定时间才能提交第二次,javascript里面有一个叫做debounce的可以应用到你得场景,
你可以把你提交的动作放到debounce里面,例如:

'use strict';

var debounce = function(func, timeout) {

    var timer;

    return function() {
        var _this = this;
        var args = Array.prototype.slice.call(arguments);
        clearTimeout(timer);
        timer = setTimeout(function() {
            func.apply(_this, args);
        }, timeout);
    };
};

这样当你再调用post的提交方法submit()的时候,

var debounced = debounce(submit, 100);

debounced();
debounced();
debounced();
debounced();

它只会提交一次。

1、header地址重定向
2、JS跳转其他页面
3、设置Token并验证

做一个令牌吧,当正在处理数据时,令牌为false,不能提交;当无数据处理时,令牌为true,提交处理数据。

推荐问题
宣传栏