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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
jquery创建div 实现代码
Apr 27 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
vue实现鼠标经过动画
Oct 16 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无限极分类实现的两种解决方法
2013/04/28 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python文件与目录操作实例详解
2016/02/22 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python中partial()基础用法说明
2018/12/30 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
公司建议书怎么写
2014/05/15 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
励志演讲稿大全
2014/08/21 职场文书
小学教育见习报告
2014/10/31 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis