jQuery主要完成兩個任務(wù)，一是通過Ajax異步讀取文件列表并展示，二是響應(yīng)用戶點擊事件，將對應(yīng)的文件下載次數(shù)+1。

首先，頁面載入完后，通過$.ajax()向后臺filelist.php發(fā)送一個GET形式的Ajax請求，當filelist.php相應(yīng)成功后，接收返回的json數(shù)據(jù)，通過$.each()遍歷json數(shù)據(jù)對象，構(gòu)造html字符串，并將最終得到的字符串加入到ul.filelist中，形成了demo中的文件列表。

然后，當點擊文件下載時，通過live()響應(yīng)動態(tài)加入的列表元素的click事件，將下載次數(shù)進行累加。

<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>

注釋：

ajax中的各種參數(shù)

1.type

類型：String

默認值: "GET")。請求方式 ("POST" 或 "GET")， 默認為 "GET"。

2.url

類型：String

默認值: 當前頁地址。發(fā)送請求的地址。

3.dataType

類型：String

預(yù)期服務(wù)器返回的數(shù)據(jù)類型。這里為"json": 返回 JSON 數(shù)據(jù) 。

4.cache

類型：Boolean

默認值: true，dataType 為 script 和 jsonp 時默認為 false。設(shè)置為 false 將不緩存此頁面。

5.beforeSend

類型：Function

發(fā)送請求前可修改 XMLHttpRequest 對象的函數(shù)。

XMLHttpRequest 對象是唯一的參數(shù)。

6.success

類型：Function

請求成功后的回調(diào)函數(shù)。

live() 方法為被選元素附加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。

最后，其實通讀本文，這就是一個我們通常應(yīng)用到的Ajax案例，當然還有PHP結(jié)合mysql實現(xiàn)下載的知識，希望對大家有所幫助

如果想學(xué)習(xí)更多jQuery，ajax知識，請參考我們ipnx.cn的相關(guān)教程。