jquery ajax请求方式与提示用户正在处理请稍等


Posted in Javascript onSeptember 01, 2014

初次使用$.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('正在处理,请稍等!');
}

会立即被执行。

Javascript 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
javascript动态加载二
Aug 22 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 #Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 #Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 #Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 #Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 #Javascript
影响jQuery使用的14个方面
Sep 01 #Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 #Javascript
You might like
加强版phplib的DB类
2008/03/31 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
js 居中漂浮广告
2010/03/21 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python中文件的读取和写入操作
2018/04/27 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
临床医学应届生求职信
2013/11/06 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
红头文件任命书范本
2014/06/05 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python