다운로드 횟수 통계를 구현하는 PHP 개발 완료 구현 코드

이전 장에서 conn.php 데이터베이스 파일을 생성했습니다. 데이터베이스를 읽고 filelist.php 파일과 다운로드에 응답하는 데 사용된 download.php 파일을 호출합니다.

이 섹션에서는 전체 내용을 표시합니다. 프런트엔드 페이지를 만들고 jQuery 및 AJAX를 사용하여 비동기 index.html 파일을 추가합니다.

여기서 jQuery 공개 라이브러리 링크를 소개했습니다.

<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>

다음은 index.html의 전체 코드입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>PHP+Mysql+jQuery实现文件下载次数统计</title>
<style type="text/css">
   #demo{width:80%;margin:50px auto;padding:10px;border:1px solid #ddd;background-color:#eee;}
   ul.filelist li{background:url("/upload/course/000/000/008/582e53ad28601855.gif") repeat-x center bottom #F5F5F5;
   border:1px solid #ddd;border-top-color:#fff;list-style:none;position:relative;}
   ul.filelist li.load{background:url("/upload/course/000/000/008/582e5313d54a1210.gif") no-repeat; 
   padding-left:20px; border:none; position:relative; left:150px; top:30px; width:200px}
   ul.filelist li a{display:block;padding:8px;}
   ul.filelist li a:hover .download{display:block;}
   span.download{background-color:#64b126;border:1px solid #4e9416;color:white;
   display:none;font-size:12px;padding:2px 4px;position:absolute;right:8px;
   text-decoration:none;text-shadow:0 0 1px #315d0d;top:6px;
   -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
   span.downcount{color:#999;font-size:10px;padding:3px 5px;position:absolute; margin-left:10px;text-decoration:none;}
</style>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
   $.ajax({
      type: 'GET',
      url: 'filelist.php',
      dataType: 'json',
      cache: false,
      beforeSend: function(){
         $(".filelist").html("<li class='load'>正在载入...</li>");
      },
      success: function(json){
         if(json){
            var li = '';
            $.each(json,function(index,array){
               li = li + '<li><a href="download.php?id='+array['id']+'">'+array['file']+'<span class="downcount" title="下载次数">'
               +array['downloads']+'</span><span class="download">点击下载</span></a></li>';
              });
            $(".filelist").html(li);
         }
      }
   });
   $('ul.filelist a').live('click',function(){
      var count = $('.downcount',this);
      count.text( parseInt(count.text())+1);
   });
});
</script>
</head>

<body>
<div id="header">
   <div id="logo" style="text-align: center"><h2>下载统计</h2></div>
</div>
<div id="main">
   <div id="demo">
       <ul class="filelist">
        </ul>
   </div>
</div>
<div id="footer">
</div>
</body>
</html>

이 튜토리얼은 친구들이 배우고 참조하는 데만 적합합니다. 자신의 능력을 향상시킵니다.

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PHP+Mysql+jQuery实现文件下载次数统计</title> <style type="text/css"> #demo{width:80%;margin:50px auto;padding:10px;border:1px solid #ddd;background-color:#eee;} ul.filelist li{background:url("https://img.php.cn/upload/course/000/000/008/582e53ad28601855.gif") repeat-x center bottom #F5F5F5; border:1px solid #ddd;border-top-color:#fff;list-style:none;position:relative;} ul.filelist li.load{background:url("https://img.php.cn/upload/course/000/000/008/582e5313d54a1210.gif") no-repeat; padding-left:20px; border:none; position:relative; left:150px; top:30px; width:200px} ul.filelist li a{display:block;padding:8px;} ul.filelist li a:hover .download{display:block;} span.download{background-color:#64b126;border:1px solid #4e9416;color:white; display:none;font-size:12px;padding:2px 4px;position:absolute;right:8px; text-decoration:none;text-shadow:0 0 1px #315d0d;top:6px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} span.downcount{color:#999;font-size:10px;padding:3px 5px;position:absolute; margin-left:10px;text-decoration:none;} </style> <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ type: 'GET', url: 'filelist.php', dataType: 'json', cache: false, beforeSend: function(){ $(".filelist").html("<li class='load'>正在载入...</li>"); }, success: function(json){ if(json){ var li = ''; $.each(json,function(index,array){ li = li + '<li><a href="download.php?id='+array['id']+'">'+array['file']+'<span class="downcount" title="下载次数">' +array['downloads']+'</span><span class="download">点击下载</span></a></li>'; }); $(".filelist").html(li); } } }); $('ul.filelist a').live('click',function(){ var count = $('.downcount',this); count.text( parseInt(count.text())+1); }); }); </script> </head> <body> <div id="header"> <div id="logo" style="text-align: center"><h2>下载统计</h2></div> </div> <div id="main"> <div id="demo"> <ul class="filelist"> </ul> </div> </div> <div id="footer"> </div> </body> </html>

제출하다 코드 재설정

자동운전