为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示。我们可通过设置$.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请求方式与提示用户正在处理请稍等的更多相关文章

  1. jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示

    1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...

  2. jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

    1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...

  3. 原生js,jquery ajax请求以及jsonp的调用

    ajax    是用来处理前后端交互的技术,可以改善用户体验,其本质是    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容  ...

  4. 二、jQuery Ajax请求

    一.Ajax请求 1.jQuery Ajax请求 let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/a ...

  5. jQuery ajax 请求php遍历json数组到table中

    html代码(test.html),js在html底部 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. jquery Ajax请求示例,jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  7. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

  8. jquery Ajax请求中显示Loading...

    jquery Ajax请求中显示Loading... $('#btnTest').click(function(){      $.ajax({           url ---- ,根据你需要设置 ...

  9. jquery ajax 请求参数详细说明 及 实例

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

随机推荐

  1. JS数组对象的方法

    concat 返回一个新数组,这个数组是由两个或更多数组组合而成的 array.concat(b,c); join 返回字符串值,其中包括了连接到一起的数组的所有元素,元素由指定分隔符分割开来 arr ...

  2. as3 typeof 对象类型与返回结果对照表 is as

    is 和as 运算符使用很广泛.is 用来判断一个对象是否属于一种类型,返回布尔值,true 代表属于,false 表示不属于.使用格式如下:trace (9 is Number); //输出:tru ...

  3. H5-DataUrl FileReader

    DataUrl: 将二进制文件流以字符串的形式存在,如果是图片可以在页面上展示.经常用于Canvas截图或画图展示用. 格式:data:image/png;base64,****. /** * dat ...

  4. WDA-WebDynpro Demo & FPM Demo

    Web Dynpro Demo package: SWDP_DEMO SWDP_TEST   FPM Demo package: APB_FPM_DEMO APB_FPM_DEMO_SCENARIO

  5. String类的intern()方法

    0.引言 什么都先不说,先看下面这个引入的例子: String str1 = new String("SEU")+ new String("Calvin"); ...

  6. 使用innodb_force_recovery解决MySQL崩溃无法重启问题

    因为日志已经损坏,这里采用非常规手段,首先修改innodb_force_recovery参数,使mysqld跳过恢复步骤,将mysqld 启动,将数据导出来然后重建数据库.innodb_force_r ...

  7. 关于HTTP协议及SOCKET通信

    一.HTTP 1.报文结构 HTTP:超文本传输协议,报文分为请求报文和响应报文. 2.端口(tomcat端口) http在熟知的80端口使用TCP的服务:tomcat的默认端口是8080 3.状态码 ...

  8. js indexOf within Switch

    https://stackoverflow.com/questions/22277447/indexof-within-switch switch (true) { case (msgRes.inde ...

  9. nodejs 与 json

    nodeJs读取文件(readfile) j json 处理: var fileData = fs.readFileSync(file);if (fileData) { var j = {}; cal ...

  10. gorm中数据库datetime类型的映射和time.Time的格式化

    如果在结构体中设置time变量的类型是time.Time,那么gorm取出来的时间格式将会是”2006-01-02 15:04:05.999999999 -0700 MST“东八区时间,在time.T ...