关于重复提交数据问题的解决方案

       在做前端开发的时候，我们经常会遇到提交信息到后台的需求。在做这个需求中，可能很多人都遇到过这个问题：那就是当用户点击提交按钮提交数据的时候，用户没有看到及时的交互反馈，用户会再次或者多次点击按钮提交数据，如果这个问题没有被避免，那么后台接收到的数据很可能是相同的重复数据。那怎么来解决这个问题呢？从技术的角度来说，主要有以下两个方案。

　　1. 第一个方案：从前端的角度来说。

　　当要提交的各种数据都验证正确合法后，用户点击按钮提交数据。给用户以提示信息，提示用户耐心等待。同时按钮的对应提交数据的事件和事件对应的事件处理函数。这个解决方案的伪代码可能是这样的。

function submitUserInfo(userInfoOpts) {
    $.ajax({
        url:"xxxxx",
        data:{
            name:userInfoOpts.userName,
            realName:userInfoOpts.realName,
            gender:userInfoOpts.gender
        },
        beforeSend:function(){
            // 解绑事件,用户再次点击就不会对用户的操作有任何反应
            $submitBtn.off("click");
            alert("数据已经提交，请耐心等待");
        },
        success:function(){
            alert("数据提交成功!");
            // 再次绑定事件，上一次数据提交到服务器后，用户可以再次提交数据
            $submitBtn.bind("click",submitUserInfo);
        }
    })
}

var  $submitBtn = $("#submitUserInfoBtn");
// 数据验证成功后，提交数据
$submitBtn.bind("click",submitUserInfo);

 2. 从前后端配合的角度来解决问题：

服务器端渲染页面的时候，放置一个隐藏的域,隐藏域里面放置 token 值。这样页面刚进来的时候就有一个 token值。前台提交数据的时候，一并把 token 提交到后台。后台收到 token 的时候 判断是否和上一次提交的 token 一致，如果一致，则证明是重复提交。
服务器端在每次收到数据的时候，都会收到一个  token。服务器再返回一个 token 到客户端，客户端的 token 值被重写成新的 token 值，这样每次提交数据的时候，就可以提交新的 token 到服务器端。便于服务器端做判断。这个实现的伪代码是这样的。

html 代码 示例：

<form id="form" method="post">
    <div id='wrap1' class='wrap'>
        <div class="c-w-sp">
            <div class='c-w-section'>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;充值金额
                    <input id="charge" type='text'>元<strong class='c-w-wrong'> </strong></p>
            </div>
        </div>
        <div class="c-w-sp">
            <div class='c-w-section'>
                <!-- 设置隐藏域，里面放置的 token -->
                <input type="hidden" name="token" id="token" value="{$tokenp}" />
                <p>交易密码
                    <input id="trade" type='password'>
                    <strong class='c-w-wrong'> </strong></div>
            </p>
        </div>
        <ul class="content">
            <li>
                <p>金额总数：{$xx['data']['money']} 元</p>
            </li>
            <li class="mt25">
                <a id="chargeBtn">确定充值</a>
            </li>
        </ul>
    </div>
</form>

javascript代码：

var token = $("#token").val();

function submitChargeInfo(pwd, username) {
    $.ajax({
        url: "xxx",
        type: 'post',
        dataType: 'json',
        data: {
            'username': username,
            'token': token,
            'pwd': pwd
        },
        beforeSend: function(e) {
            alert("数据已经提交，请耐心等待!");
        },
        success: function(data) {
            // 更新 token 值
            var token = data.token;
        }
    });
}
$submitBtn.bind("click",submitChargeInfo);

 

3. 页面后退重复提交表单数据

  这种情况，需要后台强制页面禁用缓存，当后退了。

 本条参考链接：http://www.phpernote.com/seo/560.html