✅ Како направити Спиннер или икону учитавања помоћу ЈКуери -ја

Преглед садржаја

ХТМЛ код
ЈКуери код

У овом водичу стварање Спиннера, типична икона учитавања коју можемо видети на вебу, на пример при раду на захтеву за базу података.

Важно је користити ове методе како би корисник схватио да наша страница ради и да не мисли да не ради, повратне информације кориснику су од виталног значаја. Видећемо пример у коме ћемо користити ЈКуери за слање захтева гоогле АПИ -ју књига за добијање ЈаваСцрипт -а.

ХТМЛ код

Код нашег ХТМЛ -а неће имати компликација, можете га видети испод.

 Учитавање Претрага ЈС књига

У заглављу можемо видети да увозим скрипту звану сцрипт.јсВидећемо касније шта ће бити. Такође увозимо ЈКуери и фонт који ће се користити за постављање Спиннер -а, ово није слика, то је икона која ће изгледати добро на свим врстама екрана, можете видети шта постоји и инсталирати је са званичне странице фонтавесоме . Затим смо унели кодирање знакова утф-8 виа мета цхарсет.

У делу тела, креирано је дугме које ће бити задужено за покретање захтева за АПИ и див где ћемо убацити податке који нас занимају из примљеног одговора. Обоје имају ид да би могли да их користе из нашег скрипта.

ЈКуери код

Код није компликован ако сте навикли на АЈАКС захтеве помоћу ЈКуери -ја.

 $ (доцумент) .реади (фунцтион () {$ ("# буттон"). цлицк (фунцтион () {$ ('# дата'). хтмл ('') $ .ајак ({урл: "хттпс: // ввв.гооглеапис.цом/боокс/в1/волумес?к=интитле:јавасцрипт "}). доне (фунцтион (дата) {слееп (2000) // Користи се само за дужи приказ спиннера у примеру $ ('# дата') ). хтмл ("") за (вар и = 0; и <дата.итемс.ленгтх; и ++) {вар боок = дата.итемс [и] .волумеИнфо; вар аутхор = боок.аутхорс иф (аутхор == ундефинед) аутхор = "?" $ ('# дата'). аппенд ("
" + (и + 1) +") " + боок.титле +"
- Аутор / и: " + аутор +"")}});})}) функција слееп (милисекунде) {вар старт = нев Дате (). гетТиме (); вхиле (труе) {иф ((нев Дате (). гетТиме () - старт)> миллисецондс) пауза;}}

Код се може видети запакован $ (документ) .већ, ово је неопходно да би се скрипта учитала када је наш ХТМЛ документ спреман и ИД -ови су "познати". Унутра то можемо видети чујемо догађај клика на дугме, као што је раније речено, ће покренути петицију.

Једном клик догађај је покренут Прво што треба да урадите је да уметнете Спиннер (као што је раније речено, то није слика, да је ово гиф овде бисмо ставили имг ознаку), а затим наставимо са извођењем АЈАКС захтев, то је захтев ДОБИТИ, па одређујемо УРЛ где ће се то урадити.

Видимо .Готово, овај део ће се извршити када АПИ одговор заврши. Унутар .Готово имамо позив на функцију спавај (Ово је креирано тако да код "чека" још 2 секунде након пријема одговора, тако да можете добро ценити Спиннер, ово не би требало бити јасно). Важан код је онај који испразни хтмл који има ид податке (уклања Спиннер) и попуњава га у петљи подацима које прима из АПИ -ја (подаци се прослеђују као параметар готово, одговор је), за руковање Одговор мора знати податке које враћа, у овом случају су приказани наслов књига и њихови аутори или аутори.

БелешкаМогли бисмо и ставити .фаил, оно што бих ја урадио је да извршим код који садржи у случају грешке, али тај део је избегнут, јер за овај пример то није потребно. Ако желите да сазнате више о АЈАКС захтевима у ЈКуери -у, посетите следећу страницу или следећи водич.

Функција спавај Није део, нити је занимљив за учитавање иконе, али нам помаже да добро видимо да је Спиннер додат, једино што ради је да добије почетно време и направи бесконачну петљу до милисекунди које су уметнуте као пролазак параметра, тада се петља прекида и функција се завршава.

Да видимо како код функционише, када отворимо страницу видимо једноставно дугме:

Када кликнете на њега, појавиће се икона Спиннер или учитавање, за шта ће бити потребно најмање 2 секунде у акцији (мораћете да додате време које захтева):