layui提交ajax请求时layer遮罩层不生效的解决过程

最近项目中需要实现一个保存公司信息的功能,提交保存是一个ajax请求
layui提交ajax请求时layer遮罩层不生效的解决过程_第1张图片

    form.on('submit(add)', function(data){
        data.field.companyType=$("#sltCompanyType").val();
        data.field.hrCompanyTradeId=$("#sltTradeType").val();
        var loading=layer.load(2, { shade: [0.15, '#ccc'] });
      $.ajax({
        url:'addCompany',
        type:'post',
       contentType : 'application/json',
        data:JSON.stringify(data.field),
        async: true,
        traditional: true,
        success:function(d){
        	layer.close(loading); 
          if(d.status==0){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            window.parent.layui.table.reload('companyList');
            window.top.layer.msg(d.message,{icon:6,time:1000});
          }else{
            layer.msg(d.message,{icon:5});
          }},
          error:function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            window.top.layer.msg('请求失败',{icon:5,time:1000});
        }
      });
      return false;
    });

layer遮罩层总是不生效,后来发现是ajax的async:false参数导致的
async:false:表示同步,只有ajax请求返回结果后,才执行ajax后面的语句
async:true:表示异步,不会等待ajax请求返回的结果,会直接后面的语句

所以将async设置为异步就可以了

参考链接:ajax同步提交时遮罩层不显示

你可能感兴趣的:(LayUI,JavaScript)