jQuery accomplit principalement deux taches. L'une consiste à lire la liste des fichiers de manière asynchrone via Ajax et à l'afficher. L'autre consiste à répondre à l'événement de clic de l'utilisateur et à augmenter le nombre de téléchargements du fichier correspondant de 1.

Tout d'abord, une fois la page chargée, envoyez une requête Ajax sous la forme de GET en arrière-plan filelist.php via $.ajax() Lorsque filelist.php répond avec succès, il re?oit les données json renvoyées via. $.each() parcourt l'objet de données json, construit la cha?ne html et ajoute la cha?ne finale à ul.filelist pour former la liste de fichiers dans la démo.

Ensuite, lorsqu'un fichier est cliqué pour être téléchargé, l'événement de clic de l'élément de liste ajouté dynamiquement re?oit une réponse via live() et le nombre de téléchargements est accumulé.

<script type="text/javascript">
$(function(){
   $.ajax({  //異步請(qǐng)求
      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">點(diǎn)擊下載</span></a></li>';
              });
            $(".filelist").html(li);
         }
      }
   });
   $('ul.filelist a').live('click',function(){
      var count = $('.downcount',this);
      count.text(parseInt(count.text())+1);
   });
});
</script>

Notes?:

Divers paramètres en ajax

1.type

Type?: String

Valeur par défaut : "GET"). Méthode de requête ("POST" ou "GET"), la valeur par défaut est "GET".

2.url

Type?: Cha?ne

Valeur par défaut?: Adresse de la page actuelle. L'adresse à laquelle envoyer la demande.

3.dataType

Type?: String

Le type de données qui devrait être renvoyé par le serveur. Voici "json"?: renvoie les données JSON.

4.cache

Type?: Booléen

Valeur par défaut?: vrai, la valeur par défaut est fausse lorsque dataType est script et jsonp. Définissez sur false pour ne pas mettre cette page en cache.

5.beforeSend

Type?: Fonction

Une fonction qui peut modifier l'objet XMLHttpRequest avant d'envoyer la requête.

L'objet XMLHttpRequest est le seul paramètre.

6.succès

Type?: Fonction

Fonction de rappel une fois la demande réussie. La méthode

live() attache un ou plusieurs gestionnaires d'événements à l'élément sélectionné et spécifie les fonctions à exécuter lorsque ces événements se produisent.

Enfin, après avoir lu cet article, il s'agit d'un cas Ajax que nous appliquons habituellement. Bien s?r, il y a aussi la connaissance de PHP combinée à MySQL pour implémenter les téléchargements, j'espère que cela sera utile. tout le monde

Si vous souhaitez en savoir plus sur jQuery et ajax, veuillez vous référer à nos tutoriels associés sur ipnx.cn.