Dans ce tutoriel le création d'un Spinner, l'icône de chargement typique que l'on peut voir sur le web, par exemple lorsque l'on travaille sur une requête à la base de données.
Il est important d'utiliser ces méthodes pour que l'utilisateur puisse apprécier que notre page fonctionne et ne pense pas qu'elle ne fonctionne pas, la rétroaction à l'utilisateur est vitale. Nous allons voir un exemple dans lequel nous allons utiliser JQuery pour faire une requête à l'API google des livres pour obtenir le JavaScript.
Code HTML
Le code de notre HTML n'aura aucune complication, vous pouvez le voir ci-dessous.
Chargement de la recherche de livres JSOn peut voir dans l'entête que j'importe le script appelé script.jsOn verra plus tard ce qu'il fait. Nous importons également JQuery et la police qui sera utilisée pour mettre le Spinner, ce n'est pas une image, c'est une icône qui ira bien sur tous les types d'écrans, vous pouvez voir ce qu'il y a et l'installer depuis la page officielle de la fontawesome . Ensuite, nous mettons l'encodage des caractères dans utf-8 à travers de jeu de caractères méta.
Dans la partie corps, un bouton a été créé qui sera chargé de lancer la requête à l'API et un div où nous insérerons les données qui nous intéressent à partir de la réponse reçue. Les deux ont un identifiant pour pouvoir les utiliser depuis notre script.
Code JQuery
Le code n'est pas compliqué si vous êtes habitué aux requêtes AJAX avec JQuery.
$ (document) .ready (function () {$ ("# button"). click (function () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (function (data) {sleep (2000) // Uniquement utilisé pour voir le spinner plus longtemps dans l'exemple $ ('# data ' ). html ("") pour (var i = 0; i <data.items.length; i ++) {var book = data.items [i] .volumeInfo; var author = book.authors if (author == undefined) author = "?" $ ('# data'). append ("
"+ (i + 1) +") "+ livre.titre +"
- Auteur/s : "+ auteur +"")}});})}) fonction sleep (millisecondes) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> millisecondes) Pause;}} Le code peut être vu enveloppé par $ (document) .prêt, cela est nécessaire pour que le script se charge lorsque notre document HTML est prêt et que les identifiants sont "connus". A l'intérieur on peut voir que nous entendons un événement de clic sur un bouton, comme dit précédemment, sera celui qui lancera la pétition.
Une fois l'événement de clic est déclenché La première chose à faire est d'insérer le Spinner (comme dit précédemment, ce n'est pas une image, s'il s'agissait d'un gif.webp ici, nous mettrons la balise img), puis de procéder à la Demande AJAX, c'est une demande AVOIR, nous spécifions donc l'URL où cela sera fait.
Nous voyons le .terminé, cette partie sera exécutée à la fin de la réponse de l'API. Dans le .terminé nous avons un appel à la fonction dormir (Ceci a été créé pour que le code "attende" 2 secondes de plus après avoir reçu une réponse, afin que vous puissiez bien apprécier le Spinner, cela ne doit pas être clair). Le code important est celui qui vide le html qui contient les données d'identification (supprime le Spinner) et le remplit en boucle avec les données qu'il reçoit de l'API, (les données sont passées en paramètre dans done, est la réponse), à manipuler La réponse doit connaître les données qu'elle renvoie, dans ce cas le titre des livres et leur(s) auteur(s) sont affichés.
NoterOn pourrait aussi mettre .échouer, ce que je ferais, c'est d'exécuter le code qu'il contient en cas d'erreur, mais cette partie est évitée, car pour cet exemple, ce n'est pas nécessaire. Si vous souhaitez en savoir plus sur les requêtes AJAX dans JQuery, visitez la page suivante ou le tutoriel suivant.
La fonction dormir Cela ne fait pas partie de, ni n'est intéressant pour le chargement de l'icône, mais cela nous aide à bien voir que le Spinner a été ajouté, la seule chose qu'il fait est d'obtenir le temps initial et de faire une boucle infinie jusqu'aux millisecondes qui sont insérées comme un passage de paramètre, puis la boucle est rompue et la fonction se termine.
Voyons comment fonctionne le code, lorsque nous ouvrons la page nous voyons un simple bouton :
Lorsque vous cliquez dessus, l'icône Spinner ou de chargement apparaîtra, ce qui prendra au moins 2 secondes en action (il faudra ajouter le temps que prend la demande):
Et à la fin de la demande il nous montrera les livres et leurs auteurs comme on peut le voir ci-dessous :
NoterCette technique peut être appliquée si vous faites les requêtes directement avec JavaScript, sans utiliser JQuery, il s'agit d'adapter le code.
Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
