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和 ...
随机推荐
- XMLTransformProvider
XMLTransformProvider1 XMLTransformProvider1.TransformRead.SourceXmlDocument := XMLDoc.GetDOMDocument ...
- 客户端如何连接 DataSnap Server 调用服务的方法
一般http访问的地址是 http://localhost:8099/datasnap/rest/TServerMethods1/EchoString/abc 一.用FDConnection1连接Da ...
- python 安装mysqldb组件
只能源码安装 源码下载: http://sourceforge.net/projects/mysql-python/files/mysql-python/1.2.3/ http://sourcefor ...
- sqlserver查询自定义的函数
1)sp_helptext同样适应用自定义函数 2)sys.sql_modules表也可以查 查看函数的源代码: exec sp_helptext '函数名'
- null id in entry (don't flush the Session after an exception occurs)
null id in entry (don't flush the Session after an exception occurs) 遇到这个异常实属不小心所致,最初看到异出的错误信息时我误认为是 ...
- cocos2d-x 3.0 学习笔记: 一个可以拖拽的Label及schedule的应用
#ifndef _DRAGLABEL_H_ #define _DRAGLABEL_H_ #include "cocos2d.h" USING_NS_CC; class DragLa ...
- stl-stack+括号配对问题
栈:stl的一种容器,遵循先进后出原则,,只能在栈的顶部操作,就像放盘子一样,洗好的盘子叠在上面,需要用时也是先从顶部拿.不允许被遍历,没有迭代器 基本操作: 1.头文件#include<sta ...
- mysql允许远程登录
Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...
- .net 发送邮件失败
1,是否为企业邮箱,如果是则用最高admin的帐号,降低其安全级别,下面的子帐号自动适用.(Google 阻止了从某个不够安全的应用进行的登录尝试) 2,做一个测试页面,对错误结果进行分析,一步一步查 ...
- Windows phone 自定义用户控件(UserControl)——ColorPicker
编码前 学习Windows phone自定义用户控件,在<WPF编程宝典>学习的小例子.并根据windows phone稍微的不同,做了点修改.ColorPicker(颜色拾取器):拥有三 ...