Ajax 实现加载进度条

 更新时间:2016年12月23日 15:14:52   作者:lqqppl  
本文给大家介绍ajax实现加载进度条效果,非常不错,具有参考借鉴价值,需要的朋友参考下

ajax beforeSend:

先说说这个 beforeSend, 在请求发送前执行 比如 可以判断用户有没有登录 ,如果没有登录就停止请求 并提示。

  $.ajax({
    url : 'my_action',
    dataType: 'script',
    beforeSend : function(xhr, opts){
      if(1 == 1) //just an example
      {
        xhr.abort(); // 停止请求
      }
    },
    complete: function(){
      console.log('DONE');
    }
  });

$.ajax有一个参数是complete:function(){} 是在 请求完成之后执行的 ,配合beforeSend可以用来展示进度条

比如:

   $.ajax({
        url : 'my_action',
        dataType: 'script',
        beforeSend : function(){
          // 设置 进度条到20%慢慢变到50%
        },
        complete: function(){
          // 设置 进度条到80%
        }
        success:function(){
          // 渲染页面
          // 进度到100%
        }
      }); 

这个只是表面上的看到的进度条 ,展示大概的进度,并不是真正的加载进度。

以上所述是小编给大家介绍的 Ajax 实现加载进度条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 浅析JSONP之解决ajax跨域问题

    浅析JSONP之解决ajax跨域问题

    本文主要讲解了如何去解决AJAX跨域的问题,从跨域的简单原理到JONP实现模式详细的讲解整个解决方案,最后利用jQuery可以很方便的实现JSONP来进行跨域访问。
    2015-09-09
  • Ajax请求WebService跨域问题的解决方案

    Ajax请求WebService跨域问题的解决方案

    这篇文章主要介绍了Ajax请求WebService跨域问题的解决方案,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • PHP Ajax实现表格实时编辑

    PHP Ajax实现表格实时编辑

    本篇文章主要介绍了Ajax实现表格实时编辑的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • Ajax实现文件上传功能(Spring MVC)

    Ajax实现文件上传功能(Spring MVC)

    这篇文章主要为大家详细介绍了Ajax实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 利用AjaxSubmit()方法实现Form提交表单后回调功能

    利用AjaxSubmit()方法实现Form提交表单后回调功能

    ajaxSubmit()方法是JQuery Form表单插件中的方法,使用时,需要在jsp或者html页面上,引入JQuery库和Form插件。接下来通过本文给大家分享通过AjaxSubmit()方法实现Form提交表单后回调功能,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • ajax同步异步简单实现

    ajax同步异步简单实现

    本文为大家介绍下ajax同步异步的简单实现,感兴趣的朋友可以参考下
    2014-01-01
  • Ajax 传递JSON实例代码

    Ajax 传递JSON实例代码

    虽然ajax全称是asynchronous javascript and XML。但目前使用ajax技术时,传递JSON已经成为事实上的标准。这篇文章主要介绍了Ajax 传递JSON实例代码,需要的朋友可以参考下
    2017-03-03
  • IE9版本以下ajax 跨域问题可行解决方法

    IE9版本以下ajax 跨域问题可行解决方法

    ajax跨域请求数据在谷歌火狐我本地IE11都是没问题的,IE9版本以下ajax 跨域却有问题,解决方法是对Internet 安全选项进行自定义级别
    2014-10-10
  • pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    这篇文章主要介绍了pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • Ajax跨域问题及解决方案(jsonp,cors)

    Ajax跨域问题及解决方案(jsonp,cors)

    远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理。这篇文章主要介绍了ajax跨域问题解决方案(jsonp,cors) ,需要的朋友可以参考下
    2019-06-06

最新评论