Ajax请求数据时添加遮罩

1，Ajax请求时添加遮罩

项目常常会遇到Ajax发送数据，这个过程有一定的时间等待，在这个等待时间我们可以添加一个遮罩，让产品更具有人性化

特别注意: ajax 如果采用  sync:false 那么遮罩不能够显示， 不可以是同步的，这是一个致命的弊端

2,Ajax发送异步请求 //beforeSend方法ajax发送请求获取数据前   complete方法是请求成功发送

$.ajax({
          type: "post",
          url: "undertakerRecordingController.do?doUndertakerCall",
          cache:false,
   data :params,
          beforeSend: function () {
             load();
          },
          complete: function () {
            disLoad();
          },
          success: function(data){
         var d = $.parseJSON(data);
              console.log(d);
              var msg = d.msg;
              if(d.success){
         tip(msg);
                  //按钮变灰
                 // $('#callButton').attr('disabled',"true");
              }else{
                  tip(msg);
                  //$('#callButton').attr('disabled',"false");
      }
          },
   error: function (errorData) {
      console.log('error：'+errorData);
          }
      });

3，load,diabload方法

function load() {
       var fromobj=$("#formobj");
   $("<div class=\"datagrid-mask\"></div>").css({
           display: "block",
           width: "100%",
           height: fromobj.height()
       }).appendTo(fromobj);
   $("<div class=\"datagrid-mask-msg\"></div>").html("正在拨打中，请稍候。。。").appendTo(fromobj).css({
           display: "block",
           left: (fromobj.outerWidth(true) - 190) / 2,
           top: (fromobj.height() - 45) / 2
       });
   }
   //取消加载层
   function disLoad() {
   $(".datagrid-mask").remove();
       $(".datagrid-mask-msg").remove();

   }

4,效果展示 遮罩成功显示