jQuery는 단순히 데이터를 제출하고 로딩 진행률을 표시하는 방법을 구현합니다. bar

jQuery는 단순히 데이터를 제출하고 로딩 진행률을 표시하는 방법을 구현합니다. bar_jquery

WBOY

풀어 주다： 2016-05-16 15:07:49

원래의

1975명이 탐색했습니다.

이 기사의 예에서는 데이터를 제출할 때 jQuery가 로딩 진행률 표시줄을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

코드의 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 코드: