背景：有一个按钮，点击之后向后端程序发起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. Windows重启显卡驱动热键说明

    Windows 有一个秘密的快捷键,可以重启显卡驱动程序.如果你的电脑经常“冻屏”,可以在重启电脑之前试试这个快捷键,它可以修复冻屏,否则就只能强制重启电脑了. 这个组合快捷键将重启 Win10 和 ...

  2. netsh winsock reset命令，作用是重置 Winsock 目录

    Win xp重置 编辑 要为 Windows XP 重置 Winsock,请按照下列步骤操作: 1.单击“开始”,运行中输入cmd. 2.然后输入命令 netsh winsock reset. 3.重 ...

  3. GitHub-分支管理01

    参考博文:廖雪峰Git教程 1. 分支说明 分支在实际中有什么用呢?假设你准备开发一个新功能,但是需要两周才能完成,第一周你写了50%的代码,如果立刻提交,由于代码还没写完,不完整的代码库会导致别人不 ...

  4. LeetCode算法题-Nim Game（Java实现）

    这是悦乐书的第203次更新,第213篇原创 01 看题和准备 你和你的朋友正在玩下面的Nim游戏:桌子上有一堆石头,每次你轮流去除1到3块石头. 移除最后一块石头的人将成为赢家. 你是第一个取出石块的 ...

  5. [WeChall] Training: Crypto - Caesar I (Crypto, Training)

    Training: Crypto - Caesar I (Crypto, Training) Crypto - Caesar I As on most challenge sites, there a ...

  6. 如何指定一个计划和目标——6W

    作为一名IT人员,需要自己指定一个计划和目标,来保证完成进度和高效的完成任务. 参考管理学如何制作计划和目标的,套用过来,也是同样适用的.来先看看管理学的相关知识吧. 计划的概念:计划是为实现组织目标 ...

  7. 面试总结——Java篇

    前言:前期对Java基础的相关知识点进行了总结,具体参看:Java基础和面试知识点.近期由于笔者正在换工作(ing),因此下面将笔者在面试过程中或笔者朋友面试过程中反馈的题目进行总结,相信弄清楚下面题 ...

  8. 8.02-json_use

    import json # 1.字符串和 dic list转换 # 字符串(json)----dict list data = '[{"name":"张三",& ...

  9. 转://Oracle Golden Gate 概念和原理

    引言:Oracle Golden Gate是Oracle旗下一款支持异构平台之间高级复制技术,是Oracle力推一种HA高可用产品,简称“OGG”,可以实现Active-Active 双业务中心架构 ...

  10. 转://Oracle 复合压缩索引场景及性能对比

    摘要:今天为什么提到这个话题,出于一个偶然,一个同事在优化新开发的系统时向我请教如何添加复合压缩索引的问题.我总结了一下,问题有三. 第一:需不需要压缩 第二:对第几列压缩 第三:性能对比,选出最优 ...