ajaxStart()和ajaxStop()
Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法。同样,ajaxStop()方法则是在所有Ajax请求都完成时调用。这些方法的参数都是一个函数,这个函数将在事件发生时被调用。
使用这些方法的每一步是获取一个页面元素的引用。然后就可以在这个元素上调用ajaxStart()和ajaxStop()方法。
使用语法:
("#loading").ajaxStart(function(){ $(this).show(); //callback }):当一个当Ajax请求开始时将把id为"loading"的内容显示;
("#loading").ajaxStop(function(){ $(this).hide(); //call }):当一个当Ajax请求结束时将把id为"loading"的内容隐藏;
在开发的过程当中,我一般会用它们来做页面等待进度图片的显示,即所有用ajax加载又不能很快加载完成的(有时页面很慢半天没显示),那么将自动调用ajaxStart显示一个等待的图片出来(我一般会用Wbox做弹出一个透明的层),等页面所有内容ajax加载完成,再关闭该层;
为了便于大家的理解,我举个简单的例子,希望对大家有帮助:
先把需要的说一下,jquery库,图片一张(等待进度的就可以,网上很多),OK,可以开始了:
index.php文件内容如下:
<script src="jquery.js"></script>
<a href="#" id="o">o</a><br />
<a href="#" id="p">p</a><br />
<a href="#" id="q">q</a><br />
<div id="loading" > <div id="content"></div>
<script>
$(document).ready(function(){
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){//ajaxStop改为ajaxComplete也是一样的
$(this).hide();
});
$("#o").click(function(){
$.post("for.php?id=o",function(data){
$("#content").html(data);
});
})
$("#p").click(function(){
$.post("for.php?id=p",function(data){
$("#content").html(data);
});
})
$("#q").click(function(){
$.post("for.php?id=q",function(data){
$("#content").html(data);
});
})
})
</script>
for.php内容如下:
<?php
if($_GET['id'])
{
for($i=0;$i<3;$i++)
{
sleep(4);//为了模范我们平时打开页面很慢,使用sleep函数,让ajax加载时等待12秒;
echo $_GET['id'];
}
}
?>
OK,把该两个文件和jquery库,图片放于你根目录下的同一目录,访问index.php后,点o或p或q,你先会看到等待进度图片,加载完成在<a>的下面层显示ajax加载的内容ooo或ppp或qqq并关闭等待加载的图片,详细的大家可以试试,用多了自然能体会到它的好处,呵呵···
最后要提醒的是,ajaxStart与ajaxStop都是全局方法,无论创建他们的代码放在何处,只要有ajax执行,他们都会执行。如果在此页面的其他地方也使用了ajax,该全局函数同样执行,因为他们是全局的。如果想使某个ajax不受全局方法的影响,那么可以在$.ajax(options)方法中,将参数中的global设置为false,如:
$.ajax({
url:"test.html",
global:false
});
ajaxStart()和ajaxStop()的更多相关文章
- jQuery使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是绑定Ajax事件.ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数.它们的调用格式 ...
- 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行
最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...
- Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现
Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...
- jquery的ajax方法:ajaxStart()和ajaxStop()
ajaxStart()方法: 当AJAX请求开始时,显示加载中的提示. $("#divMessage").ajaxStart(function(){ $(this).show(); ...
- ajaxStart()和ajaxStop()方法
使用ajaxSetup()方法设置全局Ajax默认选项 使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为: ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- jquery ajax解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- jQuery系列:Ajax
1. load(url, [data], [callback]) 1.1 解析 载入远程 HTML 文件代码并插入至 DOM 中. 语法格式: load(url, [data], [callback] ...
随机推荐
- angular2 学习笔记 ( Dynamic Component 动态组件)
更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...
- 基于哈夫曼编码的文件压缩(c++版)
本博客由Rcchio原创 我了解到很多压缩文件的程序是基于哈夫曼编码来实现的,所以产生了自己用哈夫曼编码写一个压缩软件的想法,经过查阅资料和自己的思考,我用c++语言写出了该程序,并通过这篇文章来记录 ...
- hive:数据库“行专列”操作---使用collect_set/collect_list/collect_all & row_number()over(partition by 分组字段 [order by 排序字段])
方案一:请参考<数据库“行专列”操作---使用row_number()over(partition by 分组字段 [order by 排序字段])>,该方案是sqlserver,orac ...
- Struts(十四):通用标签-form表单
form标签是struts2标签中一个重要标签: 可以生成html标签,使用起来和html的form标签差不多: Strut2的form标签会生成一个table,进行自动布局: 可以对表单提交的值进行 ...
- url的解码方式
#coding:utf-8 import urllib legal_person_string = "%E6%B3%95%E5%AE%9A%E4%BB%A3%E8%A1%A8%E4%BA%B ...
- Frame
Frame意为框架,是在屏幕上的一个矩形区域. Frame主要作为其他组件的框架基础,或为其他组件提供间距补充. 何时使用Frame组件呢? Frame组件主要用于在复杂的布局中奖其他组件分组,也用于 ...
- Python3NumPy——数组(1)之创建
开篇 numpy库作为科学计算的基础库,其地位相当重要,它是对数组操作的基石.它的存在使得线性代数以及矩阵论等相关知识在计算机上的表达更加方便与简单,集中体现出了人想办法,计算机去工作. Python ...
- 运用正则+replace+substring将一段英语的字母大写 angurlar运用自定义指令filter完成首字母大写
复习下js基础并运用正则+replace+substring将一段英语的字母大写 <!DOCTYPE html><html> <head> <meta cha ...
- ubuntu14.4 分辨率偏低
最近出了 14.04 LTS,就想安装上玩一玩.还是用 easybcd 从 windows硬盘安装.装完之后,显示效果不好于是做了如下处理: 1. 按下windows键,搜索 "附加驱动&q ...
- git中的merge与rebase
之前一直对git的merge与rebase很困惑,而且一般也只使用merge而不是使用rebase.今天受高人指点理清了两者的区别. 首先对于两者而言,他们的结果是一样的,差异在于合并的方式(产生的结 ...