最近项目中需要用到Ajax与后台传递数据,后代在处理请求时时间有过长,为了用户体验好一点,就用到了EasyUI弹出加载中的遮罩的两种方法。
第一种:
$.ajax({
type: 'POST',
url: url,
data: obj,
dataType: 'json',
beforeSend: function () {
load();
},
complete: function () {
disLoad();
},
success: function (data) {
showMessage(data);
}
});
//弹出加载层
function load() {
$("<div class=\"datagrid-mask\"></div>").css({
display: "block",
width: "100%",
height: $(window).height()
}).appendTo("body");
$("<div class=\"datagrid-mask-msg\"></div>").html("加载中,请稍候。。。").appendTo("body").css({
display: "block",
left: ($(document.body).outerWidth(true) - 190) / 2,
top: ($(window).height() - 45) / 2
});
}
//取消加载层
function disLoad() {
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}
第二种:
$.ajax({
type: 'POST',
url: url,
data: obj,
dataType: 'json',
beforeSend: function () {
$.messager.progress({
title: '提示',
msg: '文件上传中,请稍候……',
text: ''
});
},
complete: function () {
$.messager.progress('close');
},
success: function (data) {
$("#uploadHtmlUrl").val(data.fileUrl);
$("#uploadHtml").attr("src", data.fileUrl);
}
});
我在项目中用的第一种,觉得还不错。效果如下: