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 函数式编程
Aug 16 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
three.js着色器材质的内置变量示例详解
Aug 16 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
实用函数4
2007/11/08 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
详解php的socket通信
2015/08/11 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vuex入门最详细整理
2020/03/04 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
美国汽车交易网站:Edmunds
2016/08/17 全球购物
日本无添加化妆品:HABA
2016/08/18 全球购物
携程英文网站:Trip.com
2017/02/07 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
大学生暑假实习总结
2015/07/13 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
详解CSS3浏览器兼容
2022/12/24 HTML / CSS