jQuery简单实现提交数据出现loading进度条的方法


Posted in Javascript onMarch 29, 2016

本文实例讲述了jQuery简单实现提交数据出现loading进度条的方法。分享给大家供大家参考,具体如下:

html部分代码如下,复制然后引入类库即可使用

<html>
<head>
<style type="text/css">
 #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.2; opacity:.2; filter: alpha(opacity=70);}
 .loading{display: none; position: absolute; top: 50%; left: 50%; z-index:1002; }
 </style>
</head>
<body>
  <div id="bg"></div>
  <input type="button" value="Save" id="btnSave" name="btnSave" />
  <div class="loading"><img src="loading.gif"></div>
</body>
</html>

jQuery部分代码如下:

<script src="jquery-1.11.0.min.js" type="text/javascript"></script><!--自己下载类库-->
<script type="text/javascript">
$(function(){
  $("#btnSave").click(function(){
    $("#bg,.loading").show();
    $.ajax({
      async:false,
      url:"time.php",
      type:"post",
      data:{},
      success:function(mes){
        $("#bg,.loading").show();
      }
    })
  })
})
</script>

php代码:

for($i=0;$i<10000000;$i++){
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
vue 虚拟dom的patch源码分析
Mar 01 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 #Javascript
AngularJS directive返回对象属性详解
Mar 28 #Javascript
Boostrap模态窗口的学习小结
Mar 28 #Javascript
理解javascript模块化
Mar 28 #Javascript
谈一谈jQuery核心架构设计
Mar 28 #Javascript
javascript函数自动执行常用方法汇总
Mar 28 #Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
基于mysql的论坛(2)
2006/10/09 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php缓冲输出实例分析
2015/01/05 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
JS实现随机点名器
2020/04/12 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
python 统计代码行数简单实例
2017/05/04 Python
python监控进程脚本
2018/04/12 Python
python3.4实现邮件发送功能
2018/05/28 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
高三自我鉴定范文
2013/10/19 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
教师调动申请报告
2015/05/18 职场文书
nginx请求限制配置方法
2021/07/09 Servers