Médiaforma

All posts tagged charger

Les fichiers au format JSON (JavaScript Object Notation) permettent de représenter des informations structurées.

Par exemple :

{
  "Employés": [
  { "Prénom":"John" , "Nom":"Doe" },
  { "Prénom":"Anna" , "Nom":"Smith" },
  { "Prénom":"Peter" , "Nom":"Jones" }
  ]
}

 

Ce qui équivaut à :

<Employés Prénom="John" Nom="Doe">
<Employés Prénom="Anna" Nom="Smith">
<Employés Prénom="Peter" Nom="Jones">

 

Pour accéder à des données JSON, vous utiliserez la fonction $.getJSON() :

$.getJSON(URL,function(données){
  // Une ou plusieurs instructions pour traiter les données lues
});

 

 

 

Saisissez ces données dans NotePad++ et sauvegardez-les dans le fichier employes.json :

{
  "Prenom":"John",
  "Nom":"Doe",
  "Age":"25"
}

 

 

Nous allons accéder à ce fichier en jQuery et exploiter les données qui le composent. Voici le résultat attendu :

 

 

Et voici le fichier HTML5/jQuery utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lecture et parsing d'un fichier JSON</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Lecture et parsing du fichier employes.json</h2>
    <button id="lecture">Lancer la lecture</button>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#lecture').on('click', function(){
          $.getJSON('employes.json',function(data){
            $('#zone').append('Prénom : ' + data.Prenom + '<br>');
            $('#zone').append('Nom : ' + data.Nom + '<br>');
            $('#zone').append('Age : ' + data.Age + '<br>');
          });
        });
      });
    </script>
  </body>
</html>

 

L’extraction (aussi appelée parsing) des données se fait dans la fonction callback :

$.getJSON('employes.json',function(data){
  $('#zone').append('Prénom : ' + data.Prenom + '<br>');
  $('#zone').append('Nom : ' + data.Nom + '<br>');
  $('#zone').append('Age : ' + data.Age + '<br>');
});

 

La structure du fichier JSON pris en exemple est ultra simple. Pour accéder à ses différentes composantes, on utilise le paramètre de la fonction callback, suffixé par le nom des différents champs à accéder :

data.Prenom
data.Nom
data.Age

 

Exercice :

Créez le fichier employes2.json :

[
  { "Prenom":"John" , "Nom":"Doe", "Age":"25" },
  { "Prenom":"Anna" , "Nom":"Smith", "Age":"34" },
  { "Prenom":"Peter" , "Nom":"Jones", "Age":"17" }
]

 

Modifiez le code jQuery pour afficher toutes les données de ce fichier JSON. Pour cela, vous parcourrez les données retournées par la fonction $.getJSON() en utilisant la fonction $.each() dont voici la syntaxe :

$.each(données à examiner, function(index, données extraites){
  // Instructions pour examiner les données extraites
});

 

 

Solution :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lecture et parsing d'un fichier JSON</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Lecture et parsing du fichier employes.json</h2>
    <button id="lecture">Lancer la lecture</button>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#lecture').on('click', function(){
          $.getJSON('employes2.json',function(data){
            $.each(data,function(index,d){
              $('#zone').append('Prénom : ' + d.Prenom + '<br>');
              $('#zone').append('Nom : ' + d.Nom + '<br>');
              $('#zone').append('Age : ' + d.Age + '<br><br>');
            });
          });
        });
      });
    </script>
  </body>
</html>

 

La fonction callback de $.getJSON() obtient la totalité des données du fichier JSON. La boucle $.each() porte sur les données extraites par $.getJSON(). Sa fonction callback va s’intéresser individuellement à chaque enregistrements, ici représentés par la lettre “d” :

$.getJSON('employes2.json',function(data){
  $.each(data,function(index,d){

 

Pour extraire les données d’un enregistrement, il suffit de passer par “d” et de le suffixer par le nom des champs concernés : Prenom, Nom et Age :

$('#zone').append('Prénom : ' + d.Prenom + '<br>');
$('#zone').append('Nom : ' + d.Nom + '<br>');
$('#zone').append('Age : ' + d.Age + '<br><br>');

 

Voici le résultat :

 

 


En ajoutant un deuxième paramètre à la méthode load(), il est possible de limiter le chargement de données en utilisant un sélecteur jQuery :

load('URL sélecteur', function() {
  //une ou plusieurs instructions exécutées après le chargement des données
});
URL est l'URL de l'élément à charger et sélecteur est un sélecteur jQuery sans le signe $ et sans les parenthèses.

 

Exercice

En partant du code de l’exemple précédent (load.htm), insérer trois boutons dans le corps du document et associez-leur un gestionnaire d’événement qui charge les parties #p1, #p2 et #p3 de ce document (texte2.htm) :

<!DOCTYPE html>
<html>
  <head>
    <title>Texte</title>
  </head>
  <body>
    <p id="p1">
    <font size="3"><i>Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing elit. Sed non
    risus. Lectus tortor, dignissim sit amet, adipiscing nec,
    ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
    ligula massa, varius a, semper congue, euismod non, mi. Proin
    porttitor, orci nec nonummy molestie, enim est eleifend mi, non
    fermentum diam nisl sit amet erat. Duis semper.</i></font>
    </p>

    <p id="p2">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
    quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni
    dolores eos qui ratione voluptatem sequi nesciunt.
    </p>

    <p id="p3">
    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
    consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    Ut enim ad minima veniam, quis nostrum exercitationem ullam
    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
    consequatur? Quis autem vel eum iure reprehenderit qui in ea
    voluptate velit esse quam nihil molestiae consequatur, vel
    illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </p>
  </body>
</html>

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chargement AJAX avec load()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="charge-texte1">Charger le texte #p1</button>
    <button id="charge-texte2">Charger le texte #p2</button>
    <button id="charge-texte3">Charger le texte #p3</button>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#charge-texte1').on('click', function(){
          $('#zone').load('texte2.htm #p1');
        });
        $('#charge-texte2').on('click', function(){
          $('#zone').load('texte2.htm #p2');
        });
        $('#charge-texte3').on('click', function(){
          $('#zone').load('texte2.htm #p3');
        });
      });
    </script>
  </body>
</html>

Pour mettre à jour un élément sur une page Web en utilisant des données stockées sur le serveur, le plus simple consiste à utiliser la méthode jQuery load() :

load('URL de l'élément', function() {

//une ou plusieurs instructions exécutées après le chargement des données

});

 

La fonction callback est facultative. Si elle est présente, les instructions qui la composent seront exécutées lorsque le fichier aura été entièrement rapatrié par la méthode load().

A titre d’exemple, ce document (load.htm) contient deux boutons et un élément div. Le premier bouton va être utilisé pour afficher un texte dans l’élément div et le deuxième pour afficher une image dans ce même élément :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chargement AJAX avec load()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="charge-texte">Charger le texte</button>
    <button id="charge-image">Charger l'image</button><br/><br/>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#charge-texte').on('click', function(){
          $('#zone').load('texte.htm');
        });
        $('#charge-image').on('click', function(){
          $('#zone').load('image.htm');
        });
      });
    </script>
  </body>
</html>

 

Dans cet exemple, aucune fonction callback n’étant spécifiée dans les paramètres de la méthode load(), cette dernière se contente de charger les fichiers HTML correspondants et de les afficher dans l’élément div.

Voici le code du fichier texte.htm :

<!DOCTYPE html>
<html>
  <head>
    <title>Texte</title>
  </head>
  <body>
    <p>
    <font size="3"><i>Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing elit. Sed non
    risus. Lectus tortor, dignissim sit amet, adipiscing nec,
    ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
    ligula massa, varius a, semper congue, euismod non, mi. Proin
    porttitor, orci nec nonummy molestie, enim est eleifend mi, non
    fermentum diam nisl sit amet erat. Duis semper.</i></font>
    </p>
  </body>
</html>

Et voici le code du fichier image.htm :

<!DOCTYPE html>
<html>
  <head>
    <title>Image</title>
    <style type="text/css">
      p { text-align: center;}
    </style>
  </head>
  <body>
    <p><img src="chat.jpg"></p>
  </body>
</html>