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()的更多相关文章

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

    ajaxStart()和ajaxStop()方法是绑定Ajax事件.ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数.它们的调用格式 ...

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

    最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...

  3. Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...

  4. jquery的ajax方法:ajaxStart()和ajaxStop()

    ajaxStart()方法: 当AJAX请求开始时,显示加载中的提示. $("#divMessage").ajaxStart(function(){ $(this).show(); ...

  5. ajaxStart()和ajaxStop()方法

    使用ajaxSetup()方法设置全局Ajax默认选项 使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为: ...

  6. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  7. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  8. jquery ajax解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  9. jQuery系列:Ajax

    1. load(url, [data], [callback]) 1.1 解析 载入远程 HTML 文件代码并插入至 DOM 中. 语法格式: load(url, [data], [callback] ...

随机推荐

  1. cookie中存中文

    cookie中存中文 1:想要在cookie中存中文:需要用到URLEncoder(在jdkAPI中有介绍) Cookie cookie = new Cookie("User",U ...

  2. kubernetes入门(01)kubernetes是什么?

    一.kubernetes是什么? Kubernetes是Google开源的一个容器编排引擎,它支持自动化部署.大规模可伸缩.应用容器化管理.在生产环境中部署一个应用程序时,通常要部署该应用的多个实例以 ...

  3. RTSP连接中断重连的问题

    最近在调查的一个问题. 起因是我司的一款数据链产品,15km数字图传,测试时发现视频画面经常会出现马赛克或卡顿. 图传设置了10Mbps速率,而视频码流是4Mbps,按道理不应该出现这种问题. 经过几 ...

  4. python——函数

    python--函数 1.介绍: 在过去的十年间,大家广为熟知的编程方法无非两种:面向对象和面向过程,其实,无论哪种,都是一种编程的规范或者是如何编程的方法论.而如今,一种更为古老的编程方式:函数式编 ...

  5. 小技巧-C#文本快速删除空行

    查找:^\s*\n 替换空格 选择正则表达式

  6. flask开发用户管理系统wtf版

    #coding=utf-8 from flask import Flask from flask import request from flask import redirect from flas ...

  7. Typescript学习

    一 什么是Typescript 简单的说,TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub  ...

  8. Python面向对象——重写与Super

    1本文的意义 如果给已经存在的类添加新的行为,采用继承方案 如果改变已经存在类的行为,采用重写方案 2图解继承.重写与Super 注:上面代码层层关联.super()可以用到任何方法里进行调用,本文只 ...

  9. 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

    此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...

  10. 去除Eclipse中js报错的问题

    第一步:    去除eclipse的JS验证:        将windows->preference->Java Script->Validator->Errors/Warn ...