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實(shí)現(xiàn)文件下載次數(shù)統(tǒng)計(jì)</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="下載次數(shù)">'
+array['downloads']+'</span><span class="download">點(diǎn)擊下載</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>下載統(tǒng)計(jì)</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.
