easyUI的form表单重复提交处理

时间:2024-12-31 19:04:26

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