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 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
vue小白入门教程
2018/04/02 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
PyQt5每天必学之关闭窗口
2018/04/19 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
python3字符串输出常见面试题总结
2020/12/01 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
艺术用品:Arteza
2018/11/25 全球购物
旅游项目开发策划书
2014/01/18 职场文书
英文留学推荐信范文
2014/01/25 职场文书
留守儿童工作方案
2014/06/02 职场文书
红头文件任命书范本
2014/06/05 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
领导干部作风建设总结
2014/10/23 职场文书
自主招生自荐信范文
2015/03/04 职场文书