關於重復提交數據問題的解決方案

       在做前端開發的時候，我們經常會遇到提交信息到后台的需求。在做這個需求中，可能很多人都遇到過這個問題：那就是當用戶點擊提交按鈕提交數據的時候，用戶沒有看到及時的交互反饋，用戶會再次或者多次點擊按鈕提交數據，如果這個問題沒有被避免，那么后台接收到的數據很可能是相同的重復數據。那怎么來解決這個問題呢？從技術的角度來說，主要有以下兩個方案。

　　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