다운로드 횟수 통계 기능 모듈 구현을 위한 PHP 개발(3)

jQuery는 주로 두 가지 작업을 완료합니다. 하나는 Ajax를 통해 비동기적으로 파일 목록을 읽고 표시하는 것입니다. 다른 하나는 사용자의 클릭 이벤트에 응답하고 해당 파일의 다운로드 수를 1개 늘리는 것입니다.

먼저 페이지가 로드된 후 $.ajax()를 통해 백그라운드 filelist.php에 GET 형식의 Ajax 요청을 보냅니다. filelist.php가 성공적으로 응답하면 반환된 json 데이터를 수신하고 $.each를 통해 탐색합니다. () json 데이터 객체를 생성하고, html 문자열을 구성하고, 최종 문자열을 ul.filelist에 추가하여 데모에서 파일 목록을 구성합니다.

이후 파일을 클릭하여 다운로드하면 동적으로 추가된 목록 요소의 클릭 이벤트가 live()를 통해 응답되고 다운로드 횟수가 누적됩니다.

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

Notes:

ajax의 다양한 매개변수

1.type

Type: String

기본값: "GET"). 요청 방법("POST" 또는 "GET"), 기본값은 "GET"입니다.

2.url

유형: 문자열

기본값: 현재 페이지 주소. 요청을 보낼 주소입니다.

3.dataType

Type: String

서버에서 반환할 것으로 예상되는 데이터 유형입니다. 다음은 "json"입니다. JSON 데이터를 반환합니다.

4.cache