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 相关文章推荐
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
深入探究node之Transform
2017/07/20 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
简单解析Django框架中的表单验证
2015/07/17 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python3 元组tuple入门基础
2020/02/09 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
实习生的自我评价
2014/01/08 职场文书
财务简历的自我评价
2014/03/05 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
党员个人对照检查材料
2014/10/01 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
MySQL约束超详解
2021/09/04 MySQL