✅ Kaip sukurti suktuką ar įkėlimo piktogramą naudojant „JQuery“

Turinys

HTML kodas
„JQuery“ kodas

Šioje pamokoje suktuko sukūrimas, įprasta įkėlimo piktograma, kurią galime matyti žiniatinklyje, pavyzdžiui, dirbdami su duomenų bazės užklausa.

Svarbu naudoti šiuos metodus, kad vartotojas suprastų, jog mūsų puslapis veikia, ir nemanytų, kad jis neveikia, atsiliepimai vartotojui yra gyvybiškai svarbūs. Pamatysime pavyzdį, kuriame naudosime „JQuery“, kad pateiktų užklausą knygų „Google“ API, kad gautų „JavaScript“.

HTML kodas

Mūsų HTML kodas neturės jokių komplikacijų, jį galite pamatyti žemiau.

 Įkeliamos paieškos JS knygos

Antraštėje matome, kad importuoju scenarijų, pavadintą script.jsVėliau pamatysime, ką tai daro. Taip pat importuojame „JQuery“ ir šriftą, kuris bus naudojamas „Spinner“ įdėjimui, tai nėra vaizdas, tai piktograma, kuri gerai atrodys visų tipų ekranuose, galite pamatyti, kas yra, ir įdiegti iš oficialaus „Fontawesome“ puslapio . Tada įdedame simbolių kodavimą utf-8 per meta simbolių rinkinys.

Kūno dalyje buvo sukurtas mygtukas, kuris bus atsakingas už užklausos įvedimą į API, ir skyrius, kuriame įterpsime mus dominančius duomenis iš gauto atsakymo. Abu turi ID, kad galėtų juos naudoti iš mūsų scenarijaus.

„JQuery“ kodas

Kodas nėra sudėtingas, jei esate įpratę prie AJAX užklausų naudodami „JQuery“.

 $ (dokumentas) .ready (funkcija () {$ ("# mygtukas"). spustelėkite (funkcija () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (function (data) {sleep (2000) // Naudojamas tik tam, kad suktukas ilgiau matytųsi pavyzdyje $ ('# data' ). html (""), skirtas (var i = 0; i <data.items.length; i ++) {var book = data.items [i] .volumeInfo; var author = book.authors if (author == undefined) author = "?" $ ('# data'). apend ("
" + (i + 1) +") " + knyga.pavadinimas +"
- Autorius: " + autorius +"")}});})}) funkcija miego (milisekundės) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> millisekundės) pertrauka;}}

Kodą galima pamatyti suvyniotą $ (dokumentas). jau paruošta, tai būtina, kad scenarijus būtų įkeliamas, kai mūsų HTML dokumentas yra paruoštas ir ID yra „žinomi“. Viduje tai matome girdime įvykį mygtuko paspaudimuKaip jau minėta, peticija bus pradėta teikti.

Vieną kartą įvykis spustelėjamas Pirmas dalykas, kurį reikia padaryti, yra įdėti suktuką (kaip minėta anksčiau, tai nėra atvaizdas, jei čia būtų gif.webpas, mes įdėtume žymą img), tada atlikite AJAX užklausa, tai yra prašymas GET, todėl nurodome URL, kur tai bus padaryta.

Mes matome .padaryta, ši dalis bus vykdoma pasibaigus API atsakymui. Viduje .padaryta mes turime iškvietimą į šią funkciją miegoti (Tai sukurta taip, kad gavus atsakymą kodas „palauktų“ dar 2 sekundes, kad galėtumėte gerai įvertinti suktuką, to nereikėtų aiškiai pasakyti). Svarbus kodas yra tas, kuris ištuština html, kuriame yra identifikatoriaus duomenys (pašalina suktuką), ir užpildo jį ciklu su duomenimis, kuriuos jis gauna iš API, (duomenys perduodami kaip parametras atlikus, yra atsakymas), tvarkyti Atsakymas turi žinoti grąžinamus duomenis, šiuo atveju rodomas knygų pavadinimas ir jų autorius ar autoriai.

PastabaMes taip pat galėtume įdėti .nepasisekė, ką norėčiau padaryti, tai įvykdyti kodą, jei jame yra klaida, tačiau ši dalis pašalinama, nes šiame pavyzdyje tai nėra būtina. Jei norite sužinoti daugiau apie AJAX užklausas „JQuery“, apsilankykite šiame puslapyje arba šioje pamokoje.

Funkcija miegoti Tai nėra piktogramos įkėlimo dalis ir nėra įdomi, tačiau ji padeda mums gerai matyti, kad suktukas buvo pridėtas, vienintelis dalykas, kurį jis daro, yra gauti pradinį laiką ir padaryti begalinę kilpą, kol bus įterptos milisekundės parametras praeina, tada ciklas nutrūksta ir funkcija baigiasi.

Pažiūrėkime, kaip veikia kodas, kai atidarome puslapį, matome paprastą mygtuką: