In questo tutorial il creazione di uno Spinner, la tipica icona di caricamento che possiamo vedere sul web, ad esempio quando si lavora su una richiesta al database.
È importante utilizzare questi metodi in modo che l'utente possa apprezzare che la nostra pagina funziona e non pensa che non funzioni, il feedback per l'utente è vitale. Vedremo un esempio in cui utilizzeremo JQuery per fare una richiesta all'API di Google dei libri per ottenere il JavaScript.
codice HTML
Il codice del nostro HTML non avrà alcuna complicazione, puoi vederlo qui sotto.
Caricamento Cerca libri JSPossiamo vedere nell'intestazione che importo lo script chiamato script.jsVedremo più avanti cosa fa. Importiamo anche JQuery e il font che verrà utilizzato per mettere lo Spinner, questa non è un'immagine, è un'icona che starà bene su tutti i tipi di schermi, puoi vedere cosa ci sono e installarlo dalla pagina ufficiale di fontawesome . Quindi mettiamo la codifica dei caratteri in utf-8 attraverso meta set di caratteri.
Nella parte del corpo è stato creato un pulsante che si occuperà di avviare la richiesta all'API e un div dove inseriremo i dati che ci interessano dalla risposta ricevuta. Entrambi hanno un ID per poterli utilizzare dal nostro script.
Codice JQuery
Il codice non è complicato se sei abituato alle richieste AJAX con JQuery.
$ (documento) .ready (funzione () {$ ("pulsante #"). click (funzione () {$ ('# dati'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (function (data) {sleep (2000) // Utilizzato solo per vedere lo spinner più lungo nell'esempio $ ('# data ' ).html ("") for (var i = 0; i <data.items.length; i ++) {var book = data.items [i] .volumeInfo; var autore = book.authors if (autore == undefined) autore = "?" $ ('# dati'). append ("
"+ (i + 1) +") "+ libro.titolo +"
- Autore/i: "+ autore +"")}});})}) funzione sleep (millisecondi) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> millisecondi) rompere;}} Il codice può essere visto avvolto da $ (documento) .pronto, questo è necessario per il caricamento dello script quando il nostro documento HTML è pronto e gli ID sono "conosciuti". Dentro possiamo vedere che sentiamo un evento di clic del pulsante, come detto prima, sarà quella a lanciare la petizione.
Una volta l'evento clic viene attivato La prima cosa che si fa è inserire lo Spinner (come detto in precedenza non è un'immagine, se fosse una gif.webp qui metteremmo il tag img), e poi procedere ad eseguire il Richiesta AJAX, è una richiesta OTTENERE, quindi specifichiamo l'URL dove sarà fatto.
vediamo il .fatto, questa parte verrà eseguita al termine della risposta API. All'interno del .fatto abbiamo una chiamata alla funzione dormire (Questo è stato creato in modo che il codice "aspetta" altri 2 secondi dopo aver ricevuto una risposta, quindi puoi apprezzare bene lo Spinner, questo non dovrebbe essere chiaro). Il codice importante è quello che svuota l'html che ha i dati id (rimuove lo Spinner) e lo riempie in un ciclo con i dati che riceve dall'API, (i dati vengono passati come parametro in done, è la risposta), da gestire La risposta deve conoscere i dati che restituisce, in questo caso vengono indicati il titolo dei libri e il loro autore o autori.
NotaPotremmo anche mettere .fallire, quello che farei è eseguire il codice che contiene in caso di errore, ma quella parte è ovviata, poiché per questo esempio non è necessaria. Se vuoi saperne di più sulle richieste AJAX in JQuery, visita la pagina seguente o il seguente tutorial.
La funzione dormire Non fa parte, né è interessante per caricare l'icona, ma ci aiuta a vedere bene che lo Spinner è stato aggiunto, l'unica cosa che fa è ottenere l'ora iniziale e fare un ciclo infinito fino ai millisecondi che vengono inseriti come un passaggio di parametro, quindi il ciclo viene interrotto e la funzione termina.
Vediamo come funziona il codice, quando apriamo la pagina vediamo un semplice pulsante:
Quando ci clicchi sopra, apparirà lo Spinner o l'icona di caricamento, che impiegherà almeno 2 secondi in azione (dovrai aggiungere il tempo che impiega la richiesta):
E alla fine della richiesta ci mostrerà i libri e i loro autori come possiamo vedere di seguito:
NotaQuesta tecnica può essere applicata se si effettuano le richieste direttamente con JavaScript, senza utilizzare JQuery, si tratta di adattare il codice.
Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
