PHP開發實作下載次數統計功能模組(三)
jQuery主要完成兩個任務,一是透過Ajax非同步讀取檔案清單並展示,二是回應使用者點擊事件,將對應的檔案下載次數+1。
首先,頁面載入完後,透過$.ajax()向後台filelist.php發送GET形式的Ajax請求,當filelist.php相應成功後,接收返回的json數據,透過$. each()遍歷json資料對象,建構html字串,並將最終得到的字串加入ul.filelist中,形成了demo中的檔案清單。
然後,點擊檔案下載時,透過live()回應動態加入的清單元素的click事件,將下載次數進行累加。
<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>
註解:
#ajax中的各種參數
1.type
##類型: String預設值: "GET")。請求方式 ("POST" 或 "GET"), 預設為 "GET"。2.url
類型:String預設值: 目前頁位址。發送請求的位址。3.dataType
類型:String#預期伺服器傳回的資料類型。這裡為"json": 傳回 JSON 資料 。4.cache
類型:Boolean預設值: true,dataType 為 script 和 jsonp 時預設為 false。設定為 false 將不快取此頁面。5.beforeSend
類型:Function發送請求前可修改 XMLHttpRequest 物件的函數。 XMLHttpRequest 物件是唯一的參數。6.success
類型:Function請求成功後的回呼函數。live() 方法為被選元素附加一個或多個事件處理程序,並規定當這些事件發生時執行的函數。
最後,其實通讀本文,這就是一個我們通常應用到的Ajax案例,當然還有PHP結合mysql實現下載的知識,希望對大家有幫助