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 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 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
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Django进阶之CSRF的解决
2018/08/01 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
高中生物教学反思
2014/02/05 职场文书
植物生产学专业求职信
2014/08/08 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
旷课检讨书
2015/01/26 职场文书
云台山导游词
2015/02/03 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
学校教代会开幕词
2016/03/04 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript