背景：有一个按钮，点击之后向后端程序发起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. 关于java中assert(断言)的使用讲解

    说明:写的不是很全面,有任何问题请留言,多交流,谢谢! 1.eclipse.myeclipse开启assert(断言),默认是关闭,如下: 说白了就是设置一下jvm的参数,参数是-ea或者-enabl ...

  2. June 18. 2018, Week 25th. Monday

    Health and cheerfulness naturally beget each other. 安康喜乐,相生相成. From Joseph Addison. Good health is a ...

  3. python入门练习题

    1.使用while循环输入 1 2 3 4 5 6     8 9 10 num = 1 while num<=10: if num ==7: num += 1 continue print(n ...

  4. python 线程队列、线程池、全局解释器锁GIL

    一.线程队列 队列特性:取一个值少一个,只能取一次,没有值的时候会阻塞,队列满了,也会阻塞 queue队列 :使用import queue,用法与进程Queue一样 queue is especial ...

  5. nginx基本配置与参数说明

    user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes  1;   #全局错误日志及PID文件 #error_log  logs/error.log; # ...

  6. (转）Spring Boot 2 (三)：Spring Boot 开源软件都有哪些？

    http://www.ityouknow.com/springboot/2018/03/05/spring-boot-open-source.html 2016年 Spring Boot 还没有被广泛 ...

  7. MySQL高级知识（八）——ORDER BY优化

    前言:在使用order by时,经常出现Using filesort,因此对于此类sql语句需尽力优化,使其尽量使用Using index. 0.准备 #1.创建test表. drop table i ...

  8. C#反射の一个泛型反射实现的网络请求框架

    点击下载源码 C#反射の反射详解(点击跳转)C#反射の反射接口(点击跳转)C#反射反射泛型接口(点击跳转)C#反射の一个泛型反射实现的网络请求框架(点击跳转)

  9. ElasticSearch（四）：使用Java连接ElasticSearch集群

    public class ESIndexMapping { private static String host="192.168.56.3"; // 服务器地址 private ...

  10. eclipse导入maven项目， A resource exists with a different case: '/xxx'.

    eclipse 导入maven 项目出现 这是由于你的workspace里有相同的项目, 这时在metadata里可以看到所有的project信息 只需在eclipse的package explore ...