jQuery implémente simplement la méthode de soumission des données et d'affichage de la progression du chargement bar

jQuery implémente simplement la méthode de soumission des données et d'affichage de la progression du chargement bar_jquery

WBOY

Libérer： 2016-05-16 15:07:49

original

1974 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery implémente simplement une barre de progression de chargement lors de la soumission de données. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La partie html du code est la suivante, copiez et importez la bibliothèque de classes à utiliser

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

Copier après la connexion

Une partie du code jQuery est la suivante :

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

Copier après la connexion

code php :