easyUI的form表單重復提交處理

1. 問題

　　生產環境出現過新增用戶提交, 入庫兩條重復數據的情況; 但是我查看代碼, 頁面做了校驗, 后台插入數據也做了校驗;  出現這種幾率的事件的非常小的, 但是還是會碰到

 

2. 解決辦法

　　其實根本原因還是用戶提交注冊表單發生了重復提交, 只要杜絕重復提交就可以了; 所以提交表單之前加入遮罩層來解決, 代碼如下:

 

function submit(){
    if(!$("#form").form('validate')){
         return false;
    }
    $('body').masked('load', '提交中...'); // 遮罩層
    Ajax.request({
        url: addUserUrl;
        params:$("#form").serialize(),
        async:false,
        ok:function(data){
            $("body").masked("unload");  // 請求完成才去掉遮罩層
            tip('新增用戶成功！');
        er:function(data){
            $("body").masked("unload");
            tip('新增用戶失敗！');
        }
});
}

 3. masked 這個需要去jquery進行擴展功能

 

(function($) {
  
  //加載遮罩層
  function load(target, msg){
    if(!$(target).children("div.mine-mask").length){
      $("<div class=\"mine-mask\" style=\"display:block;z-index:999999;\"></div>").appendTo($(target));
      var $msg = $("<div class=\"mine-mask-msg\" style=\"display:block;left:50%;z-index:1000000;\"></div>").html(msg).appendTo($(target));
      $msg.height(20);
      $msg.css({
        marginLeft : (-$msg.outerWidth() / 2),
        lineHeight : ($msg.height() + "px")
      });
    }
  }
  
  //移除遮罩層
  function unload(target){
    $(target).children("div.mine-mask").remove();
    $(target).children("div.mine-mask-msg").remove();
  }
  
  $.fn.masked = function(methodname, param) {
    var method = $.fn.masked.methods[methodname];
    if (method) {
      return method(this, param);
    } else {
      return null;
    }
  };

  $.fn.masked.methods = {
    load : function(jq, msg) {
      msg = msg || $.fn.masked.defaults.msg;
      return jq.each(function() {
        load(this, msg);
      });
    },
    unload : function(jq) {
      return jq.each(function() {
        unload(this);
      });
    }
  };
  
  $.fn.masked.defaults = $.extend({}, {
    msg : "數據加載中..."
  });
})(jQuery);