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

最新推荐文章于 2022-02-22 10:11:20 发布

Dreamer_xr

最新推荐文章于 2022-02-22 10:11:20 发布

阅读量6.8k

点赞数 2

文章标签： jQuery ajax 加载动画

本文链接：https://blog.csdn.net/xr510002594/article/details/81409426

版权

本文介绍了如何在jQuery AJAX请求数据前添加加载动画。重点强调了接口请求必须异步，使用beforeSend添加动画HTML，以及在请求完成后通过CSS显示/隐藏动画。注意beforeSend和complete的顺序，以及根据需求选择移除或隐藏动画。

摘要由CSDN通过智能技术生成

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

最近公司需求，写一个产品的后台管理系统，用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标签出来弹窗，弹窗里面是请求的数据）之后，再次点击的时候，动画就不显示了，很明显，是因为我在用

关注