Parcourir la source

Ajout exemple de requête AJAX

Benoît Hubert il y a 8 ans
Parent
commit
a24c61f885

+ 17 - 0
exemples/ajax-requete-randomuserme/contenu.html

@@ -0,0 +1,17 @@
+<h5>API randomuser.me</h5>
+<p>Le terme "API" recouvre plusieurs choses:</p>
+<ul>
+    <li>Une "librairie", càd un ensemble de fonctions qu'on peut utiliser dans nos programmes (ex: API DOM en JavaScript)</li>
+    <li>Un service sur Internet qui fournit des informations</li>
+</ul>
+<p><a target="_blank" href="https://randomuser.me/">randomuser.me</a> est une API du 2ème type, qui permet de générer des faux utilisateurs.</p>
+
+<button class="blue" id="requete-randomuser">Générer un utilisateur</button>
+<div style="border: 1px solid #888; padding: 10px; margin: 10px;">
+    <img id="picture" style="float:right;" />
+    <h5 id="user-name"></h5>
+    <ul>
+        <li>Email: <span id="email"></span></li>
+        <li>Adresse: <span id="adresse"></span></li>
+    </ul>
+</div>

+ 13 - 0
exemples/ajax-requete-randomuserme/script.js

@@ -0,0 +1,13 @@
+$('#requete-randomuser').click(function() {
+   $.get('https://api.randomuser.me', function(data) {
+     var user = data.results[0];
+     var name = user.name;
+     var loc = user.location;
+     $('#user-name').html(name.first +
+        ' ' + name.last);
+     $('#email').html(user.email);
+     $('#adresse').html(loc.city + ', ' +
+        loc.postcode + ' ' + loc.state);
+     $('#picture').prop('src', user.picture.large);
+   });
+});

+ 1 - 1
exemples/liste.json

@@ -1 +1 @@
-[{"slug":"selecteurs-basiques","title":"Sélecteurs basiques"},{"slug":"selecteurs-multiples","title":"Sélecteurs multiples"}]
+[{"slug":"selecteurs-basiques","title":"Sélecteurs basiques"},{"slug":"selecteurs-multiples","title":"Sélecteurs multiples"},{"slug":"ajax-requete-randomuserme","title":"AJAX - Requête randomuser.me"}]