jQuery ajax - ajaxStop() 方法和jQuery ajax - ajaxStart()
2017-03-30 16:40
549 查看
当所有 AJAX 请求完成时,触发一个提示框:
$("div").ajaxStop(function(){ alert("所有 AJAX 请求已完成"); });亲自试一试
定义和用法
ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。详细说明
无论 Ajax 请求在何时完成 ,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStop 事件。在此时,由 .ajaxStop() 方法注册的任何函数都会被执行。语法
.ajaxStop(function())
参数 | 描述 |
---|---|
function() | 规定当 AJAX 请求完成时运行的函数。 |
示例
AJAX 请求结束后隐藏信息:$("#loading")[code].ajaxStop(function(){$(this).hide();[/code]});当 AJAX 请求开始时,显示“加载中”的指示:$("div").ajaxStart(function(){$(this).html("<img src='demo_wait.gif' />");});亲自试一试
定义和用法
ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。详细说明
无论在何时发送 Ajax 请求,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在,则 jQuery 会触发该 ajaxStart 事件。在此时,由 .ajaxStart() 方法注册的任何函数都会被执行。语法
.ajaxStart(function())
参数 | 描述 |
---|---|
function() | 规定当AJAX 请求开始时运行的函数。 |
示例
AJAX 请求开始时显示信息:$("#loading").ajaxStart(function(){$(this).show();});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()方法
- jquery的ajax方法:ajaxStart()和ajaxStop()
- ajaxStart()和ajaxStop()方法
- jquery ajaxStart, ajaxStop 显示loading
- 【AJAX】使用ajaxStart()和ajaxStop()方法
- jQuery ajax请求 - ajaxStart() ajaxSend() ajaxStop() ajaxComplete()方法
- Jquery ajaxStart()与ajaxStop()方法(实例讲解)
- Jquery ajaxStart()与ajaxStop()方法(实例讲解)
- jQuery学习——ajax的ajaxStart()与ajaxStop()方法
- Jquery ajaxStart()与ajaxStop()方法(实例讲解)
- JQUERY ajaxStart()和ajaxStop()方法
- jQuery ajax - ajax() 方法
- jquery 之 ajaxStart() 和 ajaxStop
- jQuery ajax - ajax() 方法
- jQuery ajax - ajax() 方法
- jQuery Ajax事件-ajaxStart(callback)
- jQuery Ajax事件-ajaxStop(callback)
- Android Activity为什么要细化出onCreate、onStart、onResume、onPause、onStop、onDesdroy这么多方法让应用去重载?
- MVC中使用Ajax提交数据 Jquery Ajax方法传值到action