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

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

　　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>          充值金额
<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