AvoidRepeatSubmit-通過Javascript避免用戶端重複提交請求

      Web項目上線後當訪問壓力增大時，處理速度往往比在測試環境時慢好多倍。當使用者點擊頁面控制項提交請求半天沒反應時，他就會不停的重複點擊該控制項，造成請求的重複提交，這個時候很多問題就暴露出來了。上個項目是用Asp.net+C#開發的，為了避免這個重複提交問題，在以前的一個js版本上做了一些完善，雖然技術比較傳統，但還是能做為應急之用。

      Asp.net用戶端提交的路徑分為以下幾種：

•    a) 點button提交 -> form的onsubmit事件
     b) 點button提交 -> button的WebForm_DoPostBackWithOptions ->form的WebForm_OnSubmit(包含了自訂的submit事件)
•    c) 點button     -> __doPostBack -> 運行form的onsubmit –> submit
     d) 點button     -> WebForm_DoPostBackWithOptions -> __doPostBack -> 運行form的onsubmit(WebForm_OnSubmit) –> submit

 

該js的代碼如下：

Code//---------------------------------------------------------// 作者：野文(Jasson) http://qguohog.cnblogs.com// 日期：2010-12-18// 功能：避免重複提交資料。若某個按鈕控制項不需要啟用重複提交，//       則在其上添加屬性AvoidRepeatSubmit="false"//---------------------------------------------------------$(document).ready(    function() {        var isPosting = false;        var divMask = null;        var divTipContent = null;        var formOnSubEvts = new Object();        var submitByClickCtrl = null;        function _doPostBack() { };        if (typeof (__doPostBack) == "function") {            _doPostBack = __doPostBack;            __doPostBack = _doPostBackNew;        }        function _doPostBackNew(sender, args) {            try {                submitByClickCtrl = $("#" + sender);            }            catch (e) {                try {                    submitByClickCtrl = $("#" + sender.replace('$', '_'));                }                catch (ex) {                    submitByClickCtrl = null;                }            }            _doPostBack(sender, args);        }        function createLayerMask() {            if (divMask == null) {                divMask = $("<div tabindex='0'></div>");                $(divMask).addClass("arsMask");                $(document.body).append(divMask);                bindEvents(divMask);            }        }        function createTipContent() {            if (divTipContent == null) {                divTipContent = $("<div></div>");                $(divTipContent).addClass("arsTipContent");                $(document.body).append(divTipContent);                bindEvents(divTipContent);            }        }        function bindEvents(divObj) {            $(divObj).blur(function() { this.focus(); });            $(divObj).bind("drag", function() { return false; });            $(divObj).bind("selectstart", function() { return false; });            $(divObj).bind("contextmenu", function() { return false; });            $(divObj).bind("focus", function() { this.blur(); });        }        function setLocation() {            $(divMask).height(document.documentElement.scrollTop + document.documentElement.clientHeight);            $(divMask).width(document.documentElement.scrollLeft + document.documentElement.clientWidth);            $(divTipContent).css("left", document.documentElement.scrollLeft + (document.documentElement.clientWidth - $(divTipContent).width()) / 2);            $(divTipContent).css("top", document.documentElement.scrollTop + (document.documentElement.clientHeight - $(divTipContent).height()) / 2);        }        function showMaskAndTipContent(isShow) {            isPosting = isShow;            createLayerMask();            createTipContent();            if (isShow) {                setProgressInfo();                $(divMask).show();                $(divTipContent).show();                setLocation();                $(window).bind("scroll", setLocation);                $(window).bind("resize", setLocation);            }            else {                $(divMask).hide();                $(divTipContent).hide();                $(window).unbind("scroll", setLocation);                $(window).unbind("resize", setLocation);            }        }        function setProgressInfo(text, width, height) {            if (divTipContent != null) {                proText = text || "處理中，請稍候...";                proWidth = width || 140;                proHeight = height || 40;                $(divTipContent).html(proText);                $(divTipContent).width(proWidth);                $(divTipContent).height(proHeight);            }        }        function useAvoidRepeatSubmit(ctl) {            var avoid = $(ctl).attr("AvoidRepeatSubmit");            return (typeof (avoid) == "undefined" || avoid.toLowerCase() != "false");        }        $("input[type=submit],input[type=image]").click(            function() {                submitByClickCtrl = this;            }        );        $("form").each(            function() {                var eSubmit = this.onsubmit;                if (typeof (this.onsubmit) == "function") {                    formOnSubEvts[$(this).attr("name")] = eSubmit;                    this.onsubmit = null;                }                this.onsubmit = function(e) {                    var evt = e || window.event;                    if (isPosting && evt != null) {                        return evt.returnValue = !(evt.cancelBubble = true);                    }                    var eSubmit = formOnSubEvts[$(this).attr("name")];                    if (typeof (eSubmit) == "function" && !eSubmit()) {                        return false;                    }                    if (submitByClickCtrl != null) {                        if (useAvoidRepeatSubmit(submitByClickCtrl)) {                            showMaskAndTipContent(true);                        }                    }                    return true;                }            }        );    });

    效果如下：

   

    樣本Demo代碼下載：AvoidRepeatSubmit.