jquery-ajax请求：超时设置，增加 loading 提升体验

前端发送Ajax请求到服务器，服务器返回数据这一过程，因原因不同耗时长短也有差别，且这段时间内页面显示空白。如何优化这段时间内的交互体验，以及长时间内服务器仍未返回数据这一问题，是我们开发中不容忽视的重点。

常见的做法是：

1、设置超时时间，一旦时间超过设定值，便终止请求；
2、页面内容加载之前，手动增加一个 loading 层。

代码如下：

getAjax: function (method, apiUrl, options, callback) {var xhr = $.ajax({type: method,url: apiUrl,data: options,timeout: 5000, // 设置超时时间 dataType: "json", beforeSend: function (xhr) { $.showLoading(); // 数据加载成功之前，使用loading组件 }, success: function(json) { $.hideLoading(); // 成功后，隐藏loading组件 if(callback && callback instanceof Function === "true") { callback(json); } }, error: function (textStatus) { console.error(textStatus); }, complete: function (XMLHttpRequest,status) { if(status == 'timeout') { xhr.abort(); // 超时后中断请求 $.alert("网络超时，请刷新", function () { location.reload(); }) } } }) }

转载于:https://www.cnblogs.com/zhangruiqi/p/7845592.html

jquery-ajax请求：超时设置，增加 loading 提升体验相关推荐

ppst——技术视频 jquery ajax 请求同步异步的执行的设置
ppst 技术视频--技术视频 jquery ajax 请求同步异步的执行的设置:请访问ppst 技术视频分享平台 , www.ppst.cc,上面有最新的技术视频,推荐大家把博客录制成视频吧,可以 ...
jQuery ajax请求两次问题,jquery ajax请求了两次问题
页面有一个请求form: 订单编号用户帐户发货状态请选择未发送已发送查询 JavaScript请求部分: function showdatalist() { var username = ...
ajax调用ashx的方法,jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是&q ...
ajax请求如何判断超时,ajax请求超时判断(转载)
ajax请求时有个参数可以借鉴一下 var ajaxTimeOut = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : ' ...
ajax datatype为html,Jquery ajax请求中datatype的含义
一切从一个普通的前端ajax请求jspringMVC后端的例子开始, 前端jquery ajax 请求: $.ajax({ url: getAbsoluteUrl('score/findScore') ...
Ajax请求如何设置csrf_token
1. 方式一通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送. $.ajax({url: "/cookie_ajax/",type: ...
ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
统一处理jquery ajax请求过程中的异常错误信息的机制
统一处理jquery ajax请求过程中的异常错误信息的机制参考文章: (1)统一处理jquery ajax请求过程中的异常错误信息的机制 (2)https://www.cnblogs.com/wi ...
ajax 公共请求头部,ajax请求中全局增加请求头，如常见的token
加入当前的地址栏中保存的需要增加的请求头为例 url地址为: http://192.168.1.13:8080/demo/index.html?token=c7c8e210-7f07-472d-b88 ...

jquery-ajax请求：超时设置，增加 loading 提升体验

jquery-ajax请求：超时设置，增加 loading 提升体验相关推荐

最新文章

热门文章