前端方式防止重复提交

发表于

在实际业务过程中，经常会碰到点击一个按钮ajax提交表单，如果不加以控制按钮一点可点击，导致ajax重复提交，最终业务上的重复和资源上的浪费

可以用两种方式来加以控制

  • ajax beforeSend里将button禁用，complete将button恢复可用
  • 一段时间内button禁用，之后恢复可用

这里使用第二种方式结合一个发送验证码的例子写了一个插件，点击按钮后ajax调用后台发送验证码，按钮60秒禁用，不可以再次获取验证码，并在button上显示倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
(function($) {
    $.fn.timer = function(options) {
    //默认参数
    var defaults = {
        second: 60,//默认计时60秒
        afterEnd: null//计时完毕后的回调函数，默认为空
    };
    //将传入的参数options和默认参数defaults合并在内部使用
    var opts = $.extend({}, defaults, options);
    return this.each(function() {
        var el = this,
        diff = opts.second,//剩余时间
        width = $(el).width(),//按钮上的原始宽度
        end = $(el).text();//按钮上的原始文字
        function update() {
            //如果计时结束
            if (diff <= 0) {
            //将按钮上的文字恢复成原始的
            $(el).html(end);
            //按钮恢复可用
            $(el).attr('disabled', false);
            //如果调用插件时有指定回调函数，执行
            if (opts.afterEnd) {
                opts.afterEnd();
            }
            return;
        }
        //由于文字长短不一样，这里我手动设置了按钮的宽度
        $(el).html(diff).width(width);
        //禁用按钮
        $(el).attr('disabled', true);
        //使用setTimeout()函数，每隔1S，剩余时间-1，并调用一次update()重新设置按钮
        setTimeout(function() {
                diff--;
                update();
            }, 1000);
        }
        //第一次需要调用一下update()让倒计时跑起来
        update();
    });
  };
})(jQuery);

调用方式：

  • $(el).timer();
  • $(el).timer({second: 30, afterEnd: function(){alert(‘计时结束了’);}});

表单默认是这样的：

点击获取验证码后，点击按钮后ajax调用后台发送验证码，按钮60秒禁用，并在button上显示倒计时，倒计时结束后恢复默认