实现confirm提交Ajax异步请求，反应时间提供等待loading操作。

客户提出针对点击了按钮等待的时间较长，不知道是什么原因，这个时候可能会乱点，造成客户的困扰，也造成有些数据重复提交。为解决这个问题我们采用了loading用来显示等待。

针对重复提交

Ajax提供了针对表单重复提交的处理办法，使用beforeSend（局部事件）属性可以有效的处理

    //声明的等待框变量
  var ajaxbg = $("#background,#progressBar");

function member_insert(obj, id) {
            layer.confirm('确认要全部入库吗？', function(index) {

                //confirm标签确定后让其消失。遮罩启动
                layer.closeAll('dialog');
                $.ajax({
                    type : 'POST',
                    url : '<c:url value="/xxx.do"/>?id=' + id,
                    dataType : 'json',
                    // 局部事件启动遮罩
                    beforeSend:function(){ 
                         ajaxbg.show(); 
                     }, 
                    success : function(data) {
                        if (data.error == 0) {
                            layer.msg('全部入库成功!', {
                                icon : 1,
                                time : 1000
                            });
                            table.ajax.reload();
                        } else {
                            layer.msg('操作失败!', {
                                icon : 5,
                                time : 1000
                            });
                        }
                    },
                    //完成后隐藏遮罩
                    complete: function () {
                        ajaxbg.hide();
                    },
                    error : function(data) {
                        console.log(data.msg);
                    },
                });
            });
        }

遮罩的启用

任意位置声明两个div,针对div的样式给出如下的css样式。

​​​​​​​​​​​        <!-- 等待框 -->
        <div id="background" class="background" style="display: none; "></div> 
        <div id="progressBar" class="progressBar" style="display: none; ">执行操作中，请稍等...</div>

css样式 

复制相关css样式，注意图片的引用地址。

<style type="text/css">
.background { 
    display: block; 
    width: 100%; 
    height: 100%; 
    opacity: 0.4; 
    filter: alpha(opacity=40); 
    background:while; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2000; 
} 
.progressBar { 
    border: solid 2px #86A5AD; 
    background: white url(${pageContext.request.contextPath}/img/progressBar_m.gif) no-repeat 10px 10px; 
} 
.progressBar { 
    display: block; 
    width: 160px; 
    height: 28px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: -74px; 
    margin-top: -14px; 
    padding: 10px 10px 10px 50px; 
    text-align: left; 
    line-height: 27px; 
    font-weight: bold; 
    position: absolute; 
    z-index: 2001; 
} 
</style>

图片如下