IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Tutoriel jQuery : apprendre le chargement d'un fichier JSON avec AJAX
Par Marc Autran

Le , par autran

0PARTAGES

Pour répondre aux lecteurs qui m'ont demandé en 2016 de présenter la version jQuery de mon article Charger un fichier JSON avec AJAX je vous propose ce billet.

Je ne suis pas un grand fan de jQuery mais je reconnais que l'utilisation de cette bibliothèque pour le cas qui nous occupe permet de réduire considérablement le code source et de masquer la complexité d'utilisation du vilain xhr.
Et comme l'un d'entre vous me l'a justement fait remarquer, j'utilise déjà massivement jQuery à travers les codes et tutos que j'ai produit sur DVP pour traiter AngularJS, Node.js ou juste certaines parties de Bootstrap.

Mais trêve de bavardages, voici le code source du nouveau client AJAX pour lire du JSON :
Code html : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
  
<!doctype html> 
<html lang="fr"> 
    <head> 
        <meta charset="UTF-8"> 
        <title> Catalogue outillage </title> 
        <!-- lien vers la bibliothèque bootstrap --> 
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
        <!-- lien vers le script contenant jquery--> 
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
        <script type="text/javascript"> 
            // pointeur sur la position de l'article courant dans le catalogue 
            var index = 0; 
            // initialisation du catalogue 
            var catalogue = []; 
  
            function executerRequete(callback) { 
                // on vérifie si le catalogue a déjà été chargé pour n'exécuter la requête AJAX qu'une seule fois 
                if (catalogue.length === 0) { 
                    $.ajax({ 
                        type: 'GET', 
                        url: 'jsonfactory.php', 
                        timeout: 3000, 
                        dataType: 'text', 
                        success: function(data) { 
                          catalogue = JSON.parse(data); 
                          callback(); 
                        }, 
                        error: function() { 
                          alert('La requête n\'a pas abouti'); 
                        } 
                      }); 
                    } 
                     else { 
                    callback(); 
                } 
            } 
  
            function lireSuivant() { 
                // connaitre le nombre d'articles dans le catalogue 
                var longueur = catalogue.length; 
                // manipulation du DOM pour afficher les caractéristiques de l'article 
                document.getElementById("nom").innerHTML = catalogue[index].nom; 
                document.getElementById("desc").innerHTML = catalogue[index].desc; 
                document.getElementById("qte").innerHTML = catalogue[index].qte; 
                document.getElementById("prix").innerHTML = catalogue[index].prix; 
                if (index < longueur - 1) { 
                    index++; 
                } 
            } 
  
            function lirePrecedent() { 
                document.getElementById("nom").innerHTML = catalogue[index].nom; 
                document.getElementById("desc").innerHTML = catalogue[index].desc; 
                document.getElementById("qte").innerHTML = catalogue[index].qte; 
                document.getElementById("prix").innerHTML = catalogue[index].prix; 
                if (index > 0) { 
                    index--; 
                } 
            } 
  
            // on initialise la lecture au premier élément 
            executerRequete(lireSuivant); 
        </script> 
    </head> 
    <body> 
        <section  class="container"> 
            <article name="données" class="well form-inline pull-left col-lg-5"> 
                <legend>Outils au catalogue</legend> 
                <label>Nom</label> : <label id = "nom"></label><br> 
                <label>Description</label> : <label id = "desc"></label><br> 
                <label>Quantité</label> : <label id = "qte"></label><br> 
                <label>Prix</label> : <label id = "prix"></label><br> 
                <button class="btn btn-primary" type="submit" onclick="executerRequete(lireSuivant)"><span class="glyphicon glyphicon-play"> </span> Lecture avant</button> 
                <button class="btn btn-primary" type="submit" onclick="executerRequete(lirePrecedent)"><span class="glyphicon glyphicon-step-backward"> </span> Lecture arrière</button> 
            </article> 
        </section> 
    </body> 
</html>
Le code source de jsonfactory.php est détaillé dans le billet précédant.

Bonne et heureuse année 2017 à tous.

Une erreur dans cette actualité ? Signalez-nous-la !