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高级程序设计
Dec 29 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
用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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
基于jquery实现轮播特效
2016/04/22 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
selenium+python自动化测试之环境搭建
2019/01/23 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
三查三看党性分析材料
2014/02/18 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
公路施工安全责任书
2015/05/08 职场文书
新生开学寄语大全
2015/05/28 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL