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
});

转载于:https://www.cnblogs.com/dianzan/p/7375438.html

Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现相关推荐

  1. jquery,ajax动态从数据库加载数据并自动选中复选框

    ajax动态加载下拉框数据(前端js发送ajax请求,后端查询数据库,得到数据,返回前端),GET,POST,DELETE,PUT上一篇地址 上一篇讲了下拉框,现在说说复选框 先从简单的单选框说起 & ...

  2. 调用ajax后页面为什么会刷新,为什么页面在JQuery ajax调用之后重新加载?

    根:Create.php 根/资源/ JS:ajaxLibrary.js 在我create.php文件我有一个看起来像这样的形式: Create 我ajaxLibrary.js看起来是这样的: fun ...

  3. ajax加载多次很卡,使用JQuery UI选项卡多次加载Ajax内容

    嗨 我基本上是通过单独的JQueryUI选项卡中的AJAX调用单个php页面(及其表单).该代码是这样的:使用JQuery UI选项卡多次加载Ajax内容 Home Profile Statistic ...

  4. 利用 JQuery的load函数动态加载页面

    利用JQuery的load函数动态加载页面 JQuery有好多Ajax函数,其中load是用来动态加载一个页面的内容到指定的dom元素上. 我们来做个例子: 做一个上下(左右)结构的页面,其中下左部分 ...

  5. php ajax 加载列表,Ajax点击不断加载数据列表(图文教程)

    这篇文章主要介绍了Ajax点击不断加载数据列表的相关资料,需要的朋友可以参考下 Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步Ja ...

  6. JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  7. 错误: asp.net ajax 客户端框架未能加载.,ASP.NET Ajax 客户端框架未能加载、Sys未定义...

    在Windows Server 2003 系统上部署asp.net项目出现以下问题: IIS为6.0 导致菜单控件的图片显示不出来: WebSite:程序中的图片显示正常. 但用到ASP.net 2. ...

  8. mui开发APP教程之mui.ajax请求后出现“加载中”

    利用mui.ajax向服务器请求数据会出现请求超时的情况,一般若是10S之后还没有响应,就会定义为超时,那么出错了的时候,这10秒钟不可能给用户白屏,即便是请求成功之后打开一个新页面,那么这个间隔时间 ...

  9. Jquery背景图片的预加载

    Jquery背景图片的预加载 //定义预加载图片列表的函数(有参数)  jQuery.preloadImages = function(){   //遍历图片   for(var i = 0; i&l ...

最新文章

  1. 广播站 PHP,让一实听见你的声音——“校园之声”广播站招募小记
  2. 中国“神威”获超算排行榜四连冠,却遭外媒质疑
  3. C语言 · 求指数
  4. CAS单点登录3--服务端登录页个性化
  5. ML之k-NN:k-NN实现对150朵共三种花的实例的萼片长度、宽,花瓣长、宽数据统计,根据一朵新花的四个特征来预测其种类
  6. http的请求体body的几种数据格式
  7. netty的编解码、粘包拆包问题、心跳检测机制原理
  8. MySQL等级考试题目练习_全国计算机等级考试二级MySQL练习题
  9. 局域网QQ第三版(V1.4)
  10. 【问答】总结|开放领域问答梳理系列(1)
  11. office2010安装提示需要MSXML版本6.10.1129.0
  12. 基于web的新闻发布系统
  13. K13318 破译信息
  14. 使用c++实现各种进制之间的转换
  15. PR剪辑-电子相册学习笔记
  16. Python Basic Grammar
  17. 【Opencv综合应用】自制训练集的人脸识别2——制作csv文件
  18. 超全植物UE4素材素材网站整理
  19. 吉他“和弦”是什么?
  20. 古希腊神话故事:菲勒美拉

热门文章

  1. 如何使用Docker、Docker-Compose和Rancher搭建部署Pipeline(二)
  2. 曾经拒绝马云的实习生 他说要开启云工作时代
  3. 松下年净利润预计降20% 或启动新一轮裁员
  4. android 管理activity
  5. listView基本实现
  6. Spring mvc Controller接口
  7. aix 查看内存,CPU 配置信息
  8. centos6.5建立cloudera-cdh4.6本地源
  9. 在.NET中使用Speex -- 音频数据编解码
  10. db2 命令选项解释