有日子没有写博客了,一些小情况,我又回来了。
最近公司需求,写一个产品的后台管理系统,用jq和bootstrap来写,用的hAdmin的UI库。接口什么的都是用jq写的,之前jq用的就少之又少,这次也算是重新学习了。那么,今天就说一个关于JQ在ajax数据到来之前添加一个加载动画的操作吧。
一、首先,接口什么的就不多介绍了。这里有一个重要的步骤,接口的请求是否异步的问题,我的接口都是同步加载的,但是这里必须要选择异步加载,这里async要赋值true,false为同步,同步的话不会显示加载效果,具体原因嘛,我也不太清楚。总之,这里要注意async的状态。
$.ajax({
url: '/shop/selectShopOrder',
type: 'POST', //GET
async: true, //或false,是否异步
二、第二呢,就是要注意,加载动画要在数据请求成功之前去添加。数据到之前用beforeSend函数来表示,在其中可以用.html( )的方法去添加加载动画的html代码,然后再通过complete的方法:在数据请求完之后消除动画的效果。
最开始的时候我用的方法分别是.html()添加动画,.remove()方法清除动画,但是这样会有一个问题,数据请求过来了,你关闭了弹窗(这里我是点击a标签出来弹窗,弹窗里面是请求的数据)之后,再次点击的时候,动画就不显示了,很明显,是因为我在用remove方法的时候移除了动画,所以再次请求的时候就没了。于是我换了一种方法,就是通过css的显示隐藏,初始状态将动画隐藏,在beforeSend方法中通过$("#loading").css("display","block")这个方法来让动画显示出来,在请求结束的时候在让他display:none这样算是解决了问题,效果也加上了,这种方法也是方便了很多,也省去了拼接字符串的烦恼,ES6模板字符串了解一下。
这里#loading是动画父盒子id
$ajax({
....
//加载动画
beforeSend: function () {
// $("#loading").html("<div class=\"wrapper wrapper-content animated fadeInRight\">\n" +
// " <div class=\"ibox \">\n" +
// " <div class=\"ibox-content\">\n" +
// " <div class=\"spiner-example\">\n" +
// " <div class=\"sk-spinner sk-spinner-double-bounce\">\n" +
// " <div class=\"sk-double-bounce1\"></div>\n" +
// " <div class=\"sk-double-bounce2\"></div>\n" +
// " </div>\n" +
// " </div>\n" +
// " </div>\n" +
// " </div>\n" +
// "</div>");
$("#loading").css("display","block");
$(".modal-body").css("display","none");
},
complete: function () {
$("#loading").css("display","none");
// $("#loading").remove();
},
success: function (data) {//数据请求成功
//$("#loading").empty(); //ajax返回成功,清除loading图标
$(".modal-body").css("display","block");
if(data.event = 'SUCCESS'){
.....
注意事项:
1.要注意beforeSend和complete的位置,要在数据请求成功之前
2.动画的样式要写好,我因为弹窗叠加比较多,想都没想用了用了fixed和z-index:9999999,哈哈哈 ,无所谓了。别到时候找不到动画就好。
3.就是关于是移除还是隐藏的问题,根据需求来定。