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);
easyUI的form表单重复提交处理的更多相关文章
- 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)
		
方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...
 - JavaWeb学习总结(十一):Session解决form表单重复提交
		
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
 - js阻止form表单重复提交
		
防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...
 - php 解决和避免form表单重复提交的方法
		
在提交表单的时候,可能遇到网速等导致页面突然加载变慢,用户重复地点击提交按钮,将在数据库产生多条数据,导致不可控情况. 比如下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏 ...
 - form表单重复提交,type=“button”和type=“submit”区别
		
公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...
 - java web学习总结(十三) -------------------使用Session防止表单重复提交
		
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
 - JavaWeb防止表单重复提交(转载)
		
转载自:http://blog.csdn.net/ye1992/article/details/42873219 在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用 ...
 - JavaWeb---总结(十三)使用Session防止表单重复提交
		
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
 - [Java拾遗五]使用Session防止表单重复提交
		
申明:此文章属于转载, 转自博客: http://www.cnblogs.com/xdp-gacl/p/3859416.html在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没 ...
 
随机推荐
- Spring-test单元测试
			
<dependency> <groupId>org.springframework</groupId> <artifactId>spring-test& ...
 - xdg-open命令智能打开各种格式的文件
			
在linux中,通常用命令行打开文本文件,比如用命令gedit.more.cat.vim.less.但当需要打开其他格式文件时,比如pdf.jpg.mp3格式文件,咱们通常做法是进入到文件所在的目录, ...
 - 一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)
			
一.先来个实战 1. 测试案例 需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐.例如: //html <bod ...
 - linux du
			
命令参数: -a或-all 显示目录中个别文件的大小. -b或-bytes 显示目录或文件大小时,以byte为单位. -c或--total 除了显示个别目录或文件的大小外,同时也显示所有目录或文 ...
 - [原][数学][C++][osg]空间向量OA到转到空间向量OB、以及四元素Q1转到Q2的函数
			
注意:Oa其实在OK的延长线上,上图只是为了好看才把Oa和OK分开了 算法需求如图所示: 已知空间向量OA和空间向量OB 我想算出OA向OB按某角度或者某时间移动 变成空间向量Oa的算法 先说废话:我 ...
 - 基于虹软人证核验 2.0 Android SDK开发集成入门
			
一.功能介绍虹软人证核验 2.0 SDK(以下简称SDK)包含人脸检测.人脸跟踪.人证核验等能力,主要实现人证的1:1比对.其中暴露对外的功能方法有:active 引擎激活init 引擎初始化inpu ...
 - variable_scope
			
1. with tf.variable_scope("a"): b=tf.get_variable(name="g",initializer=12) print ...
 - MySQL学习(四)
			
1 MySQL日期和时间类型 创建一个包含DATE类型的表 mysql> create table test3( -> star varchar(20) not null default ...
 - Implicit super constructor Object() is undefined for default constructor. Must define an explicit constructor
			
转自:https://blog.csdn.net/u013125680/article/details/43887987 解决方案:把java的类库加载进去,在工程上右键选择属性->Java B ...
 - sublime编辑器
			
1.完全卸载sublime的方法. 打开preferences->browse packages 这个包,打开的那个目录,然后删除完整的sublime Text3目录就行. 2.sublime的 ...