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");$("").css({display: "block",width: "100%",height: fromobj.height()}).appendTo(fromobj);$("").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,效果展示 遮罩成功显示

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！