jQuery实现Ajax请求时，页面显示等待的效果，超过指定请求时间后，进行其他操作
背景：有一个按钮，点击之后向后端程序发起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请求时，页面显示等待的效果，超过指定请求时间后，进行其他操作的更多相关文章
- [转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法 方法1:使用ajaxStart方法定义一个全局的“加 ...
- ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果？
ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...
- JQuery实现隔行变色和突出显示当前行 效果
运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...
- AJAX请求 $.ajaxSetup方法的使用:设置AJAX请求的默认参数选项，当程序中需要发起多个AJAX请求时，则不用再为每一个请求配置请求的参数
定义和用法ajaxSetup() 方法为将来的 AJAX 请求设置默认值.语法$.ajaxSetup({name:value, name:value, ... }) 该参数为带有一个或多个名称/值对的 ...
- jquery的ajax提交时加载处理方法
1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...
- 解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 ...
- 发送ajax请求时页面被刷新
浏览器默认会认为 button 的属性是submit.type='submit',会发生提交表单的默认行为,为button添加type="button"即可.
- 使用jquery、ajax不刷新页面打印表格（返回数据类型text、json）；
效果图: 一:返回数据是text时 1.表单代码: <body> <form action="#" method="post"> 姓名: ...
- jquery的ajax提交时loading提示的处理方法
方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){ $("#loading").ajaxStart(function(){ ...
随机推荐
- JavaScript -- 时光流逝（五）：js中的 Date 对象的方法
JavaScript -- 知识点回顾篇(五):js中的 Date 对象的方法 Date 对象: 用于处理日期和时间. 1. Date对象的方法 <script type="text/ ...
- sklearn使用——最小二乘法
参考网页:http://sklearn.apachecn.org/cn/0.19.0/ 其中提供了中文版的文件说明,较为清晰. from sklearn.linear_model import Lin ...
- mybatis中使用Integer类型的参数<if>判断问题
mybatis对传入参数进行判断时,会使用if标签, 一般是判断不为null和'', 如下: <if test="name != null and 那么 != ''"> ...
- 创建两个SAP系统之间的RFC信任关系
一种常见的场景是企业运行着多个SAP系统(ERP/SRM/CRM),用户希望在AA1系统中使用BB1系统的事务.如果直接使用RFC调用另一系统的事务的话,则会弹出登陆框,让用户再次输入帐号密码... ...
- 从Hadoop到Spark的架构实践
当下,Spark已经在国内得到了广泛的认可和支持:2014年,Spark Summit China在北京召开,场面火爆:同年,Spark Meetup在北京.上海.深圳和杭州四个城市举办,其中仅北京就 ...
- display为inline-block的元素有内容和没有内容情况下高度不一致的问题
这两天发现一个问题,就是display为inline-block的元素有内容和没有内容情况下高度不一致,虽然不会出现元素中没内容的情况,但是我还是决定必须解决这个问题,可能我有一些轻微的强迫症. &l ...
- 转://工作中 Oracle 常用数据字典集锦
DBA工作中数据字典就等同于我们本和笔,时时刻刻也分不开的,不管是看状态,还是监控,都需要数据字典的支持,本文整理出来常用的数据字典系列,帮助大家来记住和汇总以便查询利用 ALL_CATALOG Al ...
- Linux中的cat、more、less、head、tail命令
cat [OPTION]... [FILE]... -E:显示行结束符$ -n:对显示出的每一行进行编号 cat后面可以加多个文件,也就是说可以把多个文件连接起来,然后dump到标准输出. 另外cat ...
- LeetCode11：Container With Most Water
public int MaxArea(int[] height) { ; ; ; while(start<end) { max=Math.Max(max,Math.Min(height[star ...
- django url之path默认参数
url path指向视图创建和更新数据 实例: from django.urls import path from . import views urlpatterns = [ path('blog/ ...