jQuery实现Ajax请求时,页面显示等待的效果,超过指定请求时间后,进行其他操作
2023-09-14 08:56:53 时间
背景:有一个按钮,点击之后向后端程序发起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传递复杂参数给WebService
- jQuery的$.ajax示例
- Ajax jquery的库的简化版本
- Ajax基本案例详解之$.ajax的实现
- jquery 绑定省份和城市
- jQuery源码分析系列(34) : Ajax - 预处理jsonp
- jQuery源码分析系列(31) : Ajax deferred实现
- 第二百节,jQuery EasyUI,Tabs(选项卡)组件
- jquery中页面Ajax方法$.load的功能
- 编写自己的jquery插件
- jQuery插件开发详细教程
- Json对象与Json字符串互转(4种转换方式) jquery 以及 js 的方式
- jQuery-瀑布流 布局 (处理页面滚动和AJAX加载延迟问题)
- JQuery模板插件jquery.tmpl-动态ajax扩展
- 电子签章盖章之jQuery插件jquery.zsign
- jQuery图片延迟加载插件:jquery.lazyload
- 在SAP UI5应用里使用jQuery.ajax读取数据并显示在页面上
- [转]用 jQuery 实现页面滚动(Scroll)效果的完美方法
- jQuery ajax 获取信息展示在“下拉列表”中
- web前端jQuery,jsp,jstl等开发小细节分享
- jQuery UI 实例 - 滑块(Slider)
- Jquery ajax json 不执行success的原因 坑爹
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- Angular和jQuery的ajax请求的差别
- 使用JQuery、Ajax来调用WebService服务
- jquery ajax 跨域设置
- jQuery(五)Ajax、跨域