背景：有一个按钮，点击之后向后端程序发起Ajax请求，在请求结果没有返回之前，页面显示等待的效果，此时仍旧是异步请求，等待的效果在接收到结果后撤销。

　　需求：因为网络延迟或者后端程序的问题，在发起Ajax请求后，可能等待10s都接收不到数据，现在需要做的就是，如果等待时间超过10s，那么就提示用户进行其他操作，不用再继续等待结果，终止Ajax获取到数据后的操作，即认为Ajax永远取不到数据了。

　　解决方案：可以使用Jquery的ajax方法，方法中有timeout和error这两项，timeout的值是一个Number，表示多少毫秒超时；对应的error的值是一个function，是在执行ajax失败后的操作，因为指定timeout之后，一旦超时，则认为出现error，所以会执行error绑定的function。

　　示例如下：

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<script src="jquery.min.js"></script>

</head>

<body>

	<p id="p1"></p>

</body>

<script>

	$.ajax({

		url:"test.php",

		timeout:2000,

		success:function(data){$("#p1").html(data)},

		error:function(){$("#p1").html("wrong")}

	});

</script>

</html>

　　测试的时候，可以再test.php执行sleep函数，让ajax在指定时间内取出到结果。

　　需要注意的是：ajax请求已经发出了，即使timeout，你也是不能中断请求的，只不过现在你可以不再关心请求的返回结果，因为在timeout之后，即使获得结果，也不会执行ajax中为success绑定的事件。

jQuery实现Ajax请求时，页面显示等待的效果，超过指定请求时间后，进行其他操作的更多相关文章

  1. [转]jquery的ajax交付时“加载中”提示的处理方法

    本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法    方法1:使用ajaxStart方法定义一个全局的“加 ...

  2. ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果？

    ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...

  3. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

  4. AJAX请求 $.ajaxSetup方法的使用:设置AJAX请求的默认参数选项，当程序中需要发起多个AJAX请求时，则不用再为每一个请求配置请求的参数

    定义和用法ajaxSetup() 方法为将来的 AJAX 请求设置默认值.语法$.ajaxSetup({name:value, name:value, ... }) 该参数为带有一个或多个名称/值对的 ...

  5. jquery的ajax提交时加载处理方法

    1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...

  6. 解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 ...

  7. 发送ajax请求时页面被刷新

    浏览器默认会认为 button 的属性是submit.type='submit',会发生提交表单的默认行为,为button添加type="button"即可.

  8. 使用jquery、ajax不刷新页面打印表格（返回数据类型text、json）；

    效果图: 一:返回数据是text时 1.表单代码: <body> <form action="#" method="post"> 姓名: ...

  9. jquery的ajax提交时loading提示的处理方法

    方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){     $("#loading").ajaxStart(function(){   ...

随机推荐

  1. Win10改AHCI无需重装系统（无需改注册表）的方法

    下面就开始:1.开机后按下WIN键 加 R键2.输入 msconfig3.如图中所示进行点击.1 引导界面 2安全引导打钩 .最小打钩 3 下面的确定.4.点击重新启动5.在重启时连续按 F2 进入B ...

  2. http网站转换成https网站

    https,https的本地测试环境搭建,asp.net结合https的代码实现,http网站转换成https网站之后遇到的问题   一:什么是https SSL(Security   Socket  ...

  3. sci-hub免费下载论文

    作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ sci-hub网址: https://gfsoso.99lb.net/sci-hub.html 免费下载 ...

  4. Why do Kafka consumers connect to zookeeper, and producers get metadata from brokers?

    Why do Kafka consumers connect to zookeeper, and producers get metadata from brokers? Ask Question u ...

  5. JSX格式化代码，你值得拥有！

    ext install prettier-vscode https://segmentfault.com/q/1010000014822745

  6. Linux之初识磁盘

    磁盘知识体系概括 机械硬盘和固态硬盘 机械磁盘剖开图 磁盘工作的视频动画,主轴转动,机械手读写 模拟磁盘工作视频,点击中间三角播放 磁盘结构详解 磁盘外部结构 组成 主要由三部分组成:盘片.主轴(机械 ...

  7. YYModel HandyJson

    数学基础: 以类型集合空间为基础,多阶向量结构间的同构映射: 若两个数学结构之间存在同构映射,那么这两个结构叫做是同构的. 基于集合空间的映射: 原理: 1.根据类型名称获得类型的元信息: 2.根据映 ...

  8. Rancher学习笔记-----1.分享链接

    http://blog.csdn.net/csdn_duomaomao/article/details/76156334

  9. dbms_redefinition方式普通表改造分区表

    --创建一张普通表t_wjq1SEIANG@seiang11g>create table t_wjq1 as select object_id,object_name,created from ...

  10. Python：Day24 类、类的三大特性

    Python有两种编程方式:函数式+面向对象 函数式编程可以做所有的事情,但是否合适? 面向对象: 一.定义 函数: def + 函数名(参数) 面象对象: class  bar--->  名字 ...