为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示。我们可通过设置$.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. HTML5 Canvas ( 创建图形对象 ) createImageData

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. C# WEB.API 接收并解析保存base64格式的图片

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...

  3. HTML5 Canvas ( 线段端点的样式 ) lineCap

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. VBA 检查模块中是否有某个函数

    Function FindProcedures(ByRef wb As Workbook, ByVal Proc As String) As Boolean    On Error GoTo Exit ...

  5. RocketMQ初探(五)之RocketMQ4.2.6集群部署(单Master+双Master+2m+2s+async异步复制)

    以下部署方式结合众多博友的博客,经过自己一步一步实际搭建,如有雷同,侵权行为,请见谅...其中遇到不少的坑,希望能帮到更多的人,现在很少能找到一份完整版4.2.6版本的搭建教程了,如果你有幸遇见,那么 ...

  6. 4 python内置函数

    1.内置函数的整体介绍 内置参数官方详解 https://docs.python.org/3/library/functions.html?highlight=built#ascii 2.各内置函数介 ...

  7. OpenCv 人脸识别 基础

    #include <opencv2\opencv.hpp> #include <iostream> using namespace std; int main() { // 摄 ...

  8. PCA原理(转)

    PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量,常用于高维数据的降 ...

  9. DES_3DES_AES_IDES_RSA密码算法比较

    对称加密算法(也叫共享密钥) 类型 定义:发送接收使用相同的对称密钥 密钥 长度 分组长度 循环次数 安全性 DES 数据加密标准,速度较快,适用于加密大量数据的场合: 56 64 16 依赖密钥受穷 ...

  10. MongoDB服务无法启动,发生服务特定错误:100

    问题:MongoDB服务无法启动,发生服务特定错误:100 原因:没有正常关闭mongod服务,导致mongod被锁 解决方案:进入db文件夹,删除mongod.lock文件,然后重新启动服务即可