• 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);
  • 相关阅读:
    python string
    python md5使用例子
    Linux 与 Win32 部分API对照表
    使用Doxygen生成libevent document
    CRC32校验算法以及余式表生成
    SQLServer中查询时显示行号的方法
    C#上传文件图片怎么判断格式
    登录注册 分页存储过程及系统存储过程
    SQL Server 批量插入数据的两种方法
    sqlserver得到行号
  • 原文地址:https://www.cnblogs.com/shihuibei/p/9233448.html
Copyright © 2020-2023  润新知