jQuery mainly completes two tasks. One is to read the file list asynchronously through Ajax and display it. The other is to respond to the user's click event and increase the number of downloads of the corresponding file by 1.
First, after the page is loaded, send an Ajax request in the form of GET to the background filelist.php through $.ajax(). When filelist.php succeeds, it receives the returned json data and passes $. each() traverses the json data object, constructs the html string, and adds the final string to ul.filelist to form the file list in the demo.
Then, when the file is clicked to download, the click event of the dynamically added list element is responded to through live(), and the number of downloads is accumulated.
<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>Comments:
Various parameters in ajax
1.type
Type: String
Default value: "GET"). Request method ("POST" or "GET"), default is "GET".
2.url
Type: String
Default value: Current page address. The address to send the request to.
3.dataType
Type: String
The data type expected to be returned by the server. Here is "json": Returns JSON data.
4.cache
Type: Boolean
Default value: true, the default is false when dataType is script and jsonp. Set to false to not cache this page.
5.beforeSend
Type: Function
Function that can modify the XMLHttpRequest object before sending the request.
The XMLHttpRequest object is the only parameter.
6.success
Type: Function
The callback function after the request is successful.
live() The method attaches one or more event handlers to the selected element and specifies the function to run when these events occur.
Finally, after reading this article, this is an Ajax case that we usually apply. Of course, there is also the knowledge of PHP combined with mysql to implement downloads. I hope it will be helpful to everyone
If you want to learn more about jQuery and ajax, please refer to our related tutorials at www.php.cn.
Next Section