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);

 

转载于:https://www.cnblogs.com/shihuibei/p/9233448.html