关于按钮或者表单重复提交的问题的一点说法。


 

浅谈防止表单或者按钮重复点击

今天遇到一个按钮多次点击导致数据重复提交的问题。从前端角度来看，这样首先影响了程序的正确性，其次用户体验很差。 于是开心的打开google。搜索关键字表单 重复 提交打开排名靠前的几篇文章，然后继续搜索prevent form submit twice 后来发现高大上的表述为prevent duclicate submit 闲话不多说，翠花，上代码

<div class="form">
    <button href="#" class="save button anchor accept margin-bottom">保存车辆</button>
</div>

原先我的想法是：点击按钮时发送一个ajax请求，把数据传到后台，当请求返回之后提示用户成功或者失败。如果多次点击按钮的话会无疑会产生重复提交的问题

$('.save').on('click', fucntion(){
    // 取值
    ...
    // 发送请求
    $.ajax({
        url: url,
        type: 'GET',
        data: data,
        success: function(data){
            if(data.success){
                // 提示成功
                flash('请求成功');
            }else{
                // 提示失败
                flash('请求失败');
            }
        }
    })
})

修改过后的思路为：当按钮被点击时，把button给禁用掉$('.save').attr('disabled', true),同时修改按钮的文字提示用户正在提交

$('.save').on('click', function(){
    // 取值
    ...
    // 发送请求
    $.ajax({
        url: url,
        type: 'GET',
        data: data,
        // 与之前相比变化的地方，在ajax发送之前禁用按钮，修改按钮问题
        beforeSend: function(){
            $('.save').attr('disabled', true).text('正在提交');
        },
        success: function(data){
            ...
        }
    })
})

至此问题解决，但是解决好问题之后，我们仍然可以来研究一下其他可行的方式。

使用标识符。可以使用cookie，session，data等方式添加标识符。个人推荐使用data，可以封装成为一个插件，代码如下

$.fn.preventDuplicateClick = function(){
    $(this).on('click', function(e){
        var $btn = $(this);
        if($btn.data('submitted') === true){
            // 如果已被点击则阻止默认事件，当做一场梦吧
            e.preventDefault();
        }else{
            // 初次点击时，submitted设置为true，防止再次点击
            $btn.data('submitted', true);
        }
    })
    // 返回对象本身，保持链式操作
    return this;
}

使用时间戳的方式，但是我认为处理提交这类的事件不适合。

提交之后马上跳转页面适合直接提交表单数据的情况，而对于ajax这种异步请求也不是很妥当。

至于后台控制数据重复提交，这点是必要的，但是这样的处理并不能优化用户体验问题。