masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pembangunan PHP untuk melaksanakan statistik kiraan muat turun kod pelaksanaan lengkap

Kami mencipta fail pangkalan data conn.php dalam bab sebelumnya, baca pangkalan data dan panggil fail filelist.php dan fail muat turun.php yang digunakan untuk membalas muat turun

Dalam bahagian ini kami akan memaparkan sepenuhnya halaman hadapan, menambah fail jQuery dan AJAX asynchronous index.html.

Di sini kami telah memperkenalkan pautan perpustakaan awam jQuery

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

Berikut ialah kod lengkap 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>


Tutorial ini hanya sesuai untuk rakan belajar dan rujukan serta meningkatkan kebolehan diri.

Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya tiada
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492360 permainan