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 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
PHP汉字转换拼音的函数代码
2015/12/30 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
js 省地市级联选择
2010/02/07 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python模拟实现分发扑克牌
2020/04/22 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
某个公司的Java笔面试题
2016/03/11 面试题
优秀员工自荐信范文
2013/10/05 职场文书
中学教师培训制度
2014/01/31 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2014年仓库工作总结
2014/11/20 职场文书
银行工作心得体会范文
2016/01/23 职场文书
小学思品教学反思
2016/02/20 职场文书
创业计划书之便利店
2019/09/05 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL