jquery ajax请求方式与提示用户正在处理请稍等

 更新时间:2014年09月01日 16:10:20   投稿:whsnow  
为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示。我们可通过设置$.ajax()下的参数beforeSend()来实现

初次使用$.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('正在处理,请稍等!');
}

会立即被执行。

相关文章

  • jquery网页加载进度条的实现

    jquery网页加载进度条的实现

    本篇文章主要介绍了jquery网页加载进度条的实现 ,在页面加载的时候,上方红色的进度条,有兴趣的可以了解一下
    2017-06-06
  • jQuery切换网页皮肤并保存到Cookie示例代码

    jQuery切换网页皮肤并保存到Cookie示例代码

    这篇文章主要介绍通过jQuery切换网页皮肤并将状态保存到Cookie的相关代码,需要的朋友可以参考下
    2014-06-06
  • jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码

    jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码

    这篇文章主要介绍了jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码,涉及jQuery控制页面元素样式动态变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Jquery Validation插件防止重复提交表单的解决方法

    Jquery Validation插件防止重复提交表单的解决方法

    在项目开发中,测试人员报告缺陷说,即时有表单验证,但是如果快速点击两下“提交”按钮,系统会产生两条相同的记录。
    2010-03-03
  • jQuery基于muipicker实现仿ios时间选择

    jQuery基于muipicker实现仿ios时间选择

    本文给大家分享的是把jQuery的muipicker插件修改实现仿IOS时间选择特效,非常的不错,有需要的小伙伴可以参考下。
    2016-02-02
  • jQuery遍历节点树方法分析

    jQuery遍历节点树方法分析

    这篇文章主要介绍了jQuery遍历节点树方法,结合实例形式分析了3种常见的节点遍历技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery对象和DOM对象使用说明

    jQuery对象和DOM对象使用说明

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下。
    2010-06-06
  • jQuery中ajax的使用与缓存问题的解决方法

    jQuery中ajax的使用与缓存问题的解决方法

    本篇文章主要介绍了jQuery中ajax的使用与缓存问题的解决方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • jQuery插件开发发送短信倒计时功能代码

    jQuery插件开发发送短信倒计时功能代码

    最近项目开发中遇到这样的功能:1.点击按钮的时候,可以进行倒计时,倒计时自定义.2.当接收短信失败后,倒计时停止,可点击重新发送短信.3.点击的元素支持一般标签和input标签。看似很复杂其实实现代码很简单,下面小编给大家分享下实现代码,需要的朋友参考下吧
    2017-05-05
  • jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery pageSlide 是一个可以让网页出现滚动效果的jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就滑出来,再次点击隐藏页面以外的地方,它就又关闭
    2015-04-04

最新评论