jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法

更新時間：2016年03月29日 09:41:25 作者：藍色雨敏

這篇文章主要介紹了jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法,涉及jQuery的ajax調用及頁面樣式操作技巧,需要的朋友可以參考下

本文實例講述了jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)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切換特效與技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

牛叉的Jquery——Jquery與DOM對象的互相轉換及DOM的三種操作
Jquery對象就是通過jQuery包裝DOM對象后產生的對象，jQuery對象是jQuery獨有的，其可以使用jQuery里的方法，本文給大家介紹Jquery對象就是通過jQuery包裝DOM對象后產生的對象，jQuery對象是jQuery獨有的，其可以使用jQuery里的方法。感興趣的朋友可以參考下
2015-10-10
jquery中有哪些api jQuery主要API
jquery有很多的API事件，本文小編給大家整理了jquery中最主要的API函數(shù)集合。
2017-11-11
Java中Timer的用法詳解
Timer是比較常用的工具類，用于按時間計劃執(zhí)行任務。這篇文章給大家介紹java中的timer的用法詳解，涉及到java timer相關知識學習，對本文感興趣的朋友可以參考下本篇文章
2015-10-10
jQuery實現(xiàn)簡單彈出框效果實例
這篇文章主要給大家介紹了關于jQuery實現(xiàn)簡單彈出框效果的相關資料,幾天一直在研究JQuery,確實很好用,有很多需求都是要彈出框,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
jQuery滾動條插件nanoscroller使用指南
本文給大家介紹的nanoScrollerJS是一款使用簡單方式實現(xiàn) Mac OS X Lion 系統(tǒng)滾動條效果的jQuery插件。該滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。
2015-04-04
jquery彩色投票進度條簡單實例演示
這篇文章向大家推薦了一個jquery彩色投票進度條簡單實例演示，詳細介紹了如何制作進度條的步驟，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-11-11
JQueryEasyUI Layout布局框架的使用
本篇文章小編為大家介紹JQueryEasyUI Layout布局框架的使用，有需要的朋友可以參考一下
2013-04-04
jQuery+Datatables實現(xiàn)表格批量刪除功能【推薦】
這篇文章主要介紹了jQuery+Datatables實現(xiàn)表格批量刪除功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-10-10
jQuery包裹節(jié)點用法完整示例
這篇文章主要介紹了jQuery包裹節(jié)點用法,結合完整實例形式分析了jQuery中wrap方法包裹節(jié)點的使用技巧,注釋中還包含了wrapAll與wrapInner方法的使用,需要的朋友可以參考下
2016-09-09
改善你的jQuery的25個步驟千倍級效率提升
改善你的jQuery的25個步驟 -- 從頭看完會有無數(shù)收獲,千倍級效率提升
2010-02-02