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 拖拉缩放效果
Dec 10 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
js select option对象小结
Dec 20 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
jquery自定义表格样式
Nov 23 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 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安全编程之加密功能
2006/10/09 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
JavaScript 原型与继承说明
2010/06/09 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
python中requests库session对象的妙用详解
2017/10/30 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python爬取网易云音乐评论
2018/11/16 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Django-migrate报错问题解决方案
2020/04/21 Python
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
空指针到底是什么
2012/08/07 面试题
公司成立感言
2014/01/11 职场文书
晚宴邀请函范文
2014/01/15 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
村创先争优活动总结
2014/08/28 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript