Développement PHP pour implémenter le code d'implémentation complet des statistiques du nombre de téléchargements
Nous avons créé le fichier de base de données conn.php dans le chapitre précédent, lisez la base de données et appelez le fichier filelist.php et le fichier download.php utilisé pour répondre au téléchargement
Dans cette section, nous afficherons entièrement la page front-end, en ajoutant les fichiers index.html asynchrones jQuery et AJAX.
Ici, nous avons introduit le lien de la bibliothèque publique jQuery
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
Ce qui suit est le code complet d'index.html?:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>PHP+Mysql+jQuery實現(xiàn)文件下載次數(shù)統(tǒng)計</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">點擊下載</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)計</h2></div>
</div>
<div id="main">
<div id="demo">
<ul class="filelist">
</ul>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Ce tutoriel convient uniquement aux amis pour apprendre et référencer afin d'améliorer leurs propres capacités.
