关于JQ在ajax请求数据前添加加载动画

有日子没有写博客了,一些小情况,我又回来了。

最近公司需求,写一个产品的后台管理系统,用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("
\n" + // "
\n" + // "
\n" + // "
\n" + // "
\n" + // "
\n" + // "
\n" + // "
\n" + // "
\n" + // "
\n" + // "
\n" + // "
"); $("#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.就是关于是移除还是隐藏的问题,根据需求来定。

你可能感兴趣的:(jQuery,ajax,加载动画)