jQuery Ajax 加载数据时异步显示加载动画


Posted in Javascript onAugust 01, 2016

 ajax加载后台数据就不说的那么细了。

看下面代码首先前台上放置代码

<div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;">
<img alt="加载中..." src="../../Images/loading1.gif"/>
</div>

在js脚本文件中首先把这个图片动画隐藏

代码如下

$(document).ready(function () { $("#loadgif").hide();});

然后异步ajax提交请求代码如下

$(function () {
var find = new Find();
//alert(find.Template);
$.ajaxSetup({
cache: false,
async: true,
global: false,
type: "POST"
});
$("#queryBtn").click(function () { $("#loadgif").show(); find.Get() });

.....................

注意:

async: true,

当点击queryBtn按钮的时候就调用动画显示

$("#loadgif").show();

然后提交请求

等收到请求后就

$("#loadgif").hide();

效果如下:

jQuery Ajax 加载数据时异步显示加载动画

以上所述是小编给大家介绍的jQuery Ajax 加载数据时异步显示加载动画,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
JS严格模式知识点总结
Feb 27 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
jQuery简单实现title提示效果示例
Aug 01 #Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 #Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 #Javascript
jQuery获取与设置iframe高度的方法
Aug 01 #Javascript
jQuery+Pdo编写login登陆界面
Aug 01 #Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 #Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 #Javascript
You might like
php split汉字
2009/06/05 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
php批量删除操作代码分享
2017/02/26 PHP
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python实现的栈(Stack)
2018/01/26 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
关于python多重赋值的小问题
2019/04/17 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
python实现图像外边界跟踪操作
2020/07/13 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
2014厂务公开实施方案
2014/02/17 职场文书
2014植树节活动总结
2014/03/11 职场文书
车间安全生产标语
2014/06/06 职场文书
献爱心标语
2014/06/21 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
教师个人总结范文
2015/02/11 职场文书
超市主管竞聘书
2015/09/15 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书