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 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
vue弹窗消息组件的使用方法
Sep 24 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 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
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
php 魔术方法详解
2014/11/11 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
python fabric使用笔记
2015/05/09 Python
python正则表达式之作业计算器
2016/03/18 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
python中类的属性和方法介绍
2018/11/27 Python
python实现简单加密解密机制
2019/03/19 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
python实现简单颜色识别程序
2020/02/19 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
益达广告词
2014/03/14 职场文书
国庆庆典邀请函
2015/02/02 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS