jquery ajax请求方式与提示用户正在处理请稍等
为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示。我们可通过设置$.ajax()下的参数beforeSend()来实现
初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面。
异步和同步:
同步意味着执行完一段程序才能执行下一段,它属于阻塞模式,其表现在网页上的现象是——浏览器会锁定页面(即所谓的页面假死状态),用户不能操作其它的,必须等待当前请求返回数据。而使用异步方式请求,页面不会出现假死现象。
提升用户体验度:
当用户提交数据等待页面返回结果是需要时间的,有时这段等待时间比较长,为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示。我们可通过设置$.ajax()下的参数beforeSend()来实现,
eg:
html关键代码
<div id="warning"></div>
js文件中的关键代码
$.ajax(function(){
.
.
.
//省略了一些参数,这里只给出async 和 beforeSend
async: false, //同步请求,默认情况下是异步(true)
beforeSend: function(){
$('#warning').text('正在处理,请稍等!');
}
});
注意,如果你按照同步设置 async: false, $('#warning').text('正在处理,请稍等!');在网页中根本没有出现效果,如果将$('#warning').text('正在处理,请稍等!');换成 alert(‘test');在发送请求前会立即看到弹出框,这说明 beforeSend:是执行了,但是换成别的诸如 $('#warning').text('正在处理,请稍等!'); 在请求发出返回结果了都没有看到提示出现。关于这个问题,我是纳闷了很久,问题到底是什么我还是不清楚。
把同步请求改成异步请求,上面的问题就没有了,
beforeSend: function(){
$('#warning').text('正在处理,请稍等!');
}
会立即被执行。
jquery ajax请求方式与提示用户正在处理请稍等的更多相关文章
- jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示
1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...
- 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 请求php遍历json数组到table中
html代码(test.html),js在html底部 <!DOCTYPE html> <html lang="en"> <head> < ...
- jquery Ajax请求示例,jquery Ajax基本请求方法示例
jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...
- jQuery ajax请求错误返回status 0和错误error的问题
上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...
- jquery Ajax请求中显示Loading...
jquery Ajax请求中显示Loading... $('#btnTest').click(function(){ $.ajax({ url ---- ,根据你需要设置 ...
- jquery ajax 请求参数详细说明 及 实例
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
随机推荐
- RabbitMQ 端口号解析
转自:https://www.cnblogs.com/liuxingke/articles/9889517.html 端口号解析 12345 - 4369 (epmd), 25672 (Erlang ...
- 前端-CSS-11-Z-index
---- z-index 这个东西非常简单,它有四大特性,每个特性你记住了,页面布局就不会出现找不到盒子的情况. z-index 值表示谁压着谁,数值大的压盖住数值小的, 只有定位了的元素,才能有z- ...
- 在SQL Server中使用CLR调用.NET方法
介绍 我们一起来做个示例,在.NET中新建一个类,并在这个类里新建一个方法,然后在SQL Server中调用这个方法.按照微软所述,通过宿主 Microsoft .NET Framework 2 ...
- struts2 模拟令牌机制防止表单重复提交
web.xml: <?xml version="1.0" encoding="UTF-8"?><web-app version="3 ...
- spring 整合 struts2 xml配置
整合之前要搞清楚struts2是什么; struts2:表现层框架 增删改查 作用域 页面跳转 异常处理 ajax 上传下载 excel 调用service spring :IOC/ ...
- Java可重入锁与不可重入锁
可重入锁,指的是以线程为单位,当一个线程获取对象锁之后,这个线程可以再次获取本对象上的锁,而其他的线程是不可以的. synchronized 和 ReentrantLock 都是可重入锁. 可重入 ...
- spring 中c3p0的优化配置
jdbc.properties driverClass=com.mysql.jdbc.Driver jdbcUrl=jdbc:mysql://localhost:3306/testdb user=ro ...
- gff/gtf格式
1)gff3及gtf2简介 一个物种的基因组测序完成后,需要对这些数据进行解读,首先要先找到这些序列中转录起始位点.基因.外显子.内含子等组成元件在染色体中的位置信息(即注释)后才能再进行深入的分析. ...
- 64位tomcat不能配32位的JDK使用
警告: The APR based Apache Tomcat Native library failed to load. The error reported was [D:\apache-tom ...
- 创建第一个Maven项目
-----------------------siwuxie095 创建第一个 Maven 项目 1.打开 Ec ...