编程 Javascript

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程序设计有所帮助。

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

- Author -

蓝色雨敏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript编程起步（第四课）

Jan 10 Javascript

javascript跨域刷新实现代码

Jan 01 Javascript

Jquery刷新页面背景图片随机变换的实现方法

Mar 15 Javascript

Javascript连接Access数据库完整实例

Aug 03 Javascript

jQuery延迟执行的实现方法

Dec 21 Javascript

详解浏览器渲染页面过程

Feb 09 Javascript

Node.js Mongodb 密码特殊字符 @的解决方法

Apr 11 Javascript

基于vue实现可搜索下拉框定制组件

Mar 26 Javascript

Vuepress 搭建带评论功能的静态博客的实现

Feb 17 Javascript

使用vue中的混入mixin优化表单验证插件问题

Jul 02 Javascript

vue draggable resizable 实现可拖拽缩放的组件功能

Jul 15 Javascript

解决Vue 给mapState中定义的属性赋值报错的问题

Jun 22 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

PHP如何透过ODBC来存取数据库

2006/10/09 PHP

php遍历目录viewDir函数

2009/12/15 PHP

php 输出双引号"与单引号'的方法

2010/05/09 PHP

Zend Guard使用指南及问题处理

2015/01/07 PHP

PHP获取远程图片并保存到本地的方法

2015/05/12 PHP

CI框架中数据库操作函数$this->db->where()相关用法总结

2016/05/17 PHP

如何实现浏览器上的右键菜单

2006/07/10 Javascript

类似CSDN图片切换效果脚本

2009/09/17 Javascript

jQuery下通过$.browser来判断浏览器.

2011/04/05 Javascript

动态加载脚本提升javascript性能

2014/02/24 Javascript

node.js中的path.join方法使用说明

2014/12/08 Javascript

JS实现在线统计一个页面内鼠标点击次数的方法

2015/02/28 Javascript

在JavaScript中访问字符串的子串

2015/07/07 Javascript

javascript实现动态标签云

2015/10/16 Javascript

JavaScript toUpperCase()方法使用详解

2016/08/26 Javascript

require、backbone等重构手机图片查看器

2016/11/17 Javascript

JS简单实现表格排序功能示例

2016/12/20 Javascript

详解nodejs 文本操作模块-fs模块（五）

2016/12/23 NodeJs

Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

2017/02/19 Javascript

jQuery弹出窗口简单实现代码

2017/03/09 Javascript

vue2.0实现分页组件的实例代码

2017/06/22 Javascript

探讨Vue.js的组件和模板

2017/10/27 Javascript

swiper在angularjs中使用循环轮播失效的解决方法

2018/09/27 Javascript

trackingjs+websocket+百度人脸识别API实现人脸签到

2018/11/26 Javascript

jquery实现的放大镜效果示例

2020/02/24 jQuery

uni-app从安装到卸载的入门教程

2020/05/15 Javascript

Python 2.7.x 和 3.x 版本的重要区别小结

2014/11/28 Python

Python编程求解二叉树中和为某一值的路径代码示例

2018/01/04 Python

selenium python 实现基本自动化测试的示例代码

2019/02/25 Python

python 写一个性能测试工具（一）

2020/10/24 Python

法国在线药房：DoctiPharma

2020/10/21 全球购物

int *p=NULL和*p= NULL有什么区别

2014/10/23 面试题

四风问题对照检查材料整改措施

2014/09/27 职场文书

2015年员工试用期工作总结

2014/12/12 职场文书

2015年党支部书记工作总结

2015/05/21 职场文书

SQL Server远程连接的设置步骤(图文)

2022/03/23 SQL Server