Jquery工作常用实例--ajaxStart与ajaxStop(ajaxComplete)

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" style="display:none;"><img src="loading.gif" /></div>
<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
});

Jquery工作常用实例--ajaxStart与ajaxStop(ajaxComplete)

时间: 2024-08-08 09:28:29

Jquery工作常用实例--ajaxStart与ajaxStop(ajaxComplete)的相关文章

ajaxStart()与ajaxStop() | ajaxSend()与ajaxComplete() | ajaxError()

<1> ajaxStart() 设置当前第一个AJAX请求开始时执行的处理函数. ajaxSend()  设置在AJAX请求被发送前执行的处理函数. ajaxComplete() 设置当AJAX请求完成(无论成功或失败)时执行的处理函数. ajaxStop()    设置当前最后一个AJAX请求结束时执行的处理函数. <html> <head> <title></title> <script src="jquery-1.11.2.

【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例敲结果并不会执行. 在查阅资料后,发现原来在jquery1.9+版本以后,ajax全局事件需绑定到document对象上才能触发. 下面是各版本不同写法: <html> <head> <meta charset="utf-8"> <style>

jQuery使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件.ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数.它们的调用格式为: $(selector).ajaxStart(function())和$(selector).ajaxStop(function()) 其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数. 例如,

jquery的常用ajax操作

$.ajax() 定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性.最简单的情况下,$.ajax() 可以不带任何参数直接使用. 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. 语法 jQuery.ajax(

ajaxStart与ajaxStop

Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函数,这个函数将在事件发生时被调用. 使用这些方法的每一步是获取一个页面元素的引用.然后就可以在这个元素上调用ajaxStart()和ajaxStop()方法. 使用语法: ("#loading").ajaxStart(function(){  $(this).show(); //callb

SharePoint 2013 Odata 常用实例和基本操作

SharePoint2013Odata常用实例基本操作 本文讲述SharePoint 2013 Odata 常用实例和基本操作. Open Data Protocol (OData)是一个基于Rest风格的数据服务,同过这个服务可以使用同一的URI定位到具体的资源(文件和记录等),从而使得这些资源可以使用HTTP请求进行增删改查,它定义了一系列的规则,使得资源更容易被定位和操作. 首先看一下OData定义的URI结构: 那么相对SharePoint 2013,一个简单的实例为: http://m

jquery datatable 常用例子

在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简介 (1)构造函数           DataTable()   不带参数初始化DataTable 类的新实例.           DataTable(string tableName)  用指定的表名初始化DataTable 类的新实例.           DataTable(string

Ajax-04 jQuery Ajax 常用操作

jQuery jQuery 其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery Ajax a.概述 jQuery 不是生产者,而是大自然的搬运工 jQuery Ajax 本质是 XMLHttpRequest 或 ActiveXObject b.使用 --- 下载导入jQuery(2.+ 版本不再支持IE9以下的浏览器) jQuery Ajax常用操作 jQuery.ajax( url [, settings ]

makefile基础和工作常用点补充

一.Makefile简介 Makefile是什么,能做什么用,为什么要用? 定义编译规则.自动化编译.提高效率 组织文件 Makefile由一组规则(Rule)组成,每条规则的格式是: 例如: 依赖关系如下图: 注意: (1) 当我们为了执行命令而非创建目标文件时,就会使用伪目标比如 clean,伪目标总是被执行.".PHONY" 的作用是避免和当前 目录下的文件名冲突 (可能引发隐式规则). (2) 使用 "-" 前缀可以忽略命令错误,比如创建已有的路径: &qu