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类定义例子
Sep 12 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
vue实现购物车案例
May 30 Javascript
Node与Python 双向通信的实现代码
Jul 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
用 php 编写的日历
2006/10/09 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python基础教程之异常详解
2019/01/10 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
新学期校长寄语
2014/01/18 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
出纳会计岗位职责
2014/03/12 职场文书
水毁工程实施方案
2014/04/01 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
介绍信怎么写
2015/01/30 职场文书
电工实训心得体会
2016/01/14 职场文书
女性励志书籍推荐
2019/08/19 职场文书