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实现下载的知识,希望对大家有所帮助

如果想学习更多jQuery,ajax知识,请参考我们m.sbmmt.com的相关教程。

继续学习
||
<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>
提交重置代码