前端防止使用者重複提交-js

小黎也發表於2018-04-02
前端JS

背景

前端在向後端進行資料提交的時候，通常會需要在第一次提交返回前，阻止使用者在快速點選傳送二次請求，即防止重複提交，最簡單的方法是使用標誌引數或者 class 元素控制，但缺點是，每個控制重複提交的地方都需要加上這個邏輯，重複性太強，且控制邏輯不統一。

目前前端使用的是http協議，所以提交方式為兩種

  • 非同步提交，使用jQuery.ajax()
  • form 表單同步提交

非同步防重複提交的方案如下

通過 jQuery 提供的 ajaxPrefilter 方法，將在請求提交之前進行過濾，僅保留第一次請求，後續的請求 abort 阻止掉，具體實現程式碼如下

/**
 * _pendingRequests = {
 *  'http:xxx.xxxx.do':['domain=P2P','xxxx=aaa'],
 *  'http:xxx.yyyy.do':['domain=P3P','xxxx=bbb']
 * }
 * 該物件的 key 是請求的 url ，value 是由請求引數轉化成的字串陣列
 */
var _pendingRequests = {};
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    var p_item = {  //儲存請求請求的url
            key:options.url,
            index:0
        },
        dataArray = options.data ? options.data.split('&') : [];
        compareData = function(beforD,afterD) {
            //當url相同時，以此比較儲存的引數物件，若引數物件相同，則返回false，若第一個就相同，則跳出迴圈
            // 反之說明當前引數物件列表中沒有與將要提交的引數相同，則可看為不同的請求，返回true，允許發起請求
            var result  = false;
            for(var i=0;i<beforD.length;i++){
                if(beforD[i]){
                    result = false;
                    var beforData = beforD[i];
                    for(var j=0;j<beforData.length;j++){
                        if(afterD[j] !== beforData[j]){
                            result = true;
                            break;
                        }
                    }
                    if (!result){
                        break;
                    }
                }else {
                    result = true;
                    continue;
                }
            }
            return result;
        };

    //若請求佇列中不存在或者同一個請求不同引數，且不為html字尾，則加入佇列中
    if (( !_pendingRequests[p_item.key] || compareData(_pendingRequests[p_item.key],dataArray) ) && p_item.key.indexOf('.html') === -1) {
        //給 index 賦值是因為請求是非同步返回的，index用於標記第一個請求
        if(_pendingRequests[p_item.key]){
            p_item.index = _pendingRequests[p_item.key].push(dataArray)-1;
        } else{
            _pendingRequests[p_item.key] = [dataArray];
            p_item.index = 0;
        }
    } else if (p_item.key.indexOf('.html') === -1) {
        jqXHR.abort();	// 放棄後觸發的重複提交，僅保留第一次提交
        //pendingRequests[key].abort();	// 放棄先觸發的提交
    }
    var complete = options.complete;
    //請求完成
    options.complete = function(jqXHR, textStatus) {
        // 通過 key 和 index 獲取成功返回的請求，將其值為 null ，下一次該請求便是在請求佇列中便是新的一個請求
        _pendingRequests[p_item.key][p_item.index] = null;
        if ($.isFunction(complete)) {
            complete.apply(this, arguments);
        }
    };
});

複製程式碼

jquery.ajaxprefilter官方文件

表單提交防重複提交的方案如下

表單的處理就稍微要麻煩點，但大致思路和非同步的相同，等待第一次請求返回的同時，阻止後續觸發的請求傳送 首先基於jquery擴充套件了一個自定義的方法，如下

$.fn.preventDoubleSubmission = function() {
    $(this).on('submit', function(e) {
        var $form = $(this);
        // $form.data('submitted') 通過該變數判斷請求的狀態
        if ($form.data('submitted') === true) {
            //阻止請求
            e.preventDefault();
        } else {
            $form.data('submitted', true);
            if ($form.attr('target') === '_blank') {
                setTimeout(function() {
                    $form.data('submitted', false);
                }, 800);
            }
        }
    });
    return this;
};

複製程式碼

當表單初次提交時，通過 jQuery.data() 設定一個標誌位，當表單重複提交時，判斷設定的標誌位，若是提交狀態，將阻止表單的提交事件。當form.target = _blank 提交後開啟新介面的情況，將在800毫秒後恢復原介面表單可提交狀態。

為了方便對全站的表單提交統一處理，可對需要放重複提交的表單新增一個class preventDouble,在頁面渲染後，統一加上事件監聽

//掃描帶有 preventDouble 標識的form表單
$(function() {
    var f = $('.contain form.preventDouble');
    for (var i=0;i<f.length;i++){
        $(f[i]).preventDoubleSubmission();
    }
});
複製程式碼

小貼士

提交按鈕需使用 type=’submit’ ，因為監聽的是表單的submit事件 不建議多次監聽submit事件，會導致放重複提交失效 在表單提交前通常會有些表單檢驗的操作，所以當校驗失敗的時候，可以通過 event.preventDefault() 阻止表單提交

相關文章