关于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("<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.就是关于是移除还是隐藏的问题，根据需求来定。

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

猜你喜欢