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();
})
}
}
})
}
jquery-ajax请求:超时设置,增加 loading 提升体验的更多相关文章
- $.ajax()——超时设置,增加 loading 提升体验
前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的 ...
- jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示
1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...
- jquery Ajax请求中显示Loading...
jquery Ajax请求中显示Loading... $('#btnTest').click(function(){ $.ajax({ url ---- ,根据你需要设置 ...
- jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...
- 原生js,jquery ajax请求以及jsonp的调用
ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 ...
- 二、jQuery Ajax请求
一.Ajax请求 1.jQuery Ajax请求 let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/a ...
- jquery Ajax请求示例,jquery Ajax基本请求方法示例
jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...
- Ajax请求如何设置csrf_token
1. 方式一 通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送. $.ajax({ url: "/cookie_ajax/", typ ...
- jQuery ajax 请求php遍历json数组到table中
html代码(test.html),js在html底部 <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- python基础===15条变量&方法命名的最佳实践
不同的代码段采用不同的命名长度.通常来说,循环计数器(loop counters)采用1位的单字符来命名,循环判断变量(condition/loop variables)采用1个单词来命名,方法采用1 ...
- 记一个多线程使用libevent的问题
前段时间使用libevent网络库实现了一个游戏服务器引擎,在此记录下其中遇到的一个问题. 我在设计服务器上选择把逻辑和网络分线程,线程之间通信使用队列.但是这样做会有个问题: 当逻辑线程想要主动的发 ...
- IT人员必备linux安全运维之Ssh用途、安全性、身份认证以及配置……【转】
SSH一般用途 提供shell,解决telnet不安全的传输 1.修改默认ssh默认端口 vi /etc/ssh/sshd_config 修改之后重启 >systemctl restart ss ...
- MD5做为文件名。机器唯一码有电脑的CPU信息和MAC地址,这两个信息需要在linux或unix系统下才能获取吧。
可以采用机器(电脑)唯一码 + 上传IP + 当前时间戳 + GUID ( + 随机数),然后MD5做为文件名.机器唯一码有电脑的CPU信息和MAC地址,这两个信息需要在linux或unix系统下才能 ...
- [ python ] 练习作业 - 3
1. 写出Python查找一个变量的顺序 提示:4中作用域的顺序 本地作用域(local) --> 当前作用域被嵌入的本地作用域(enclsing locals) --> 全局/模块作用域 ...
- vsftpd.log内容的意义
vsftpd日志(xferlog格式)的含义 引用: Thu Mar 4 08:12:30 2004 1 202.114.40.242 37 /incoming/index.html a _ o a ...
- hdu 5875(单调栈)
Function Time Limit: 7000/3500 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total ...
- Maven_pom文件常用
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- Hadoop(四)HDFS的高级API操作
一 HDFS客户端环境准备 1.1 jar包准备 1)解压hadoop-2.7.6.tar.gz到非中文目录 2)进入share文件夹,查找所有jar包,并把jar包拷贝到_lib文件夹下 3)在全部 ...
- HadoopMR-Spark-HBase-Hive
 YARN资源调度: 三种 FIFO 大任务独占 一堆小任务独占 capacity 弹性分配 :计算任务较少时候可以利用全部的计算资源,当队列的任务多的时候会按照比例进行资源平衡. 容量保证:保证队 ...