jQuery Ajax Loading Spinner Esimerkki

Blogi

jQuery Ajax Loading Spinner Esimerkki

Jos etsit esimerkkinä jquery ajax -latauskehikkoesimerkki, jquery ajax -latauskuvan esimerkki, jquery -latauskehyspeittokuva, jquery ajax -latauskuva tietojen keräämisen aikana, lataa kuva, kun ajax -puhelu on käynnissä. Joten tämä opetusohjelma on erittäin hyödyllinen sinulle.

Tässä jQuery Ajax Loading Spinner Esimerkki -postauksessa haluaisimme jakaa kanssasi kuinka lisätä tai luoda ajax -latauspyörä HTML -sivuillesi tai esimerkkinä.

Ja jos haluat korvata pyörän kuvalla. Joten voit luoda gif -kuvan ja luoda jquery ajax -latauskuvan esimerkin.

Useimmiten tuomme tietoja soittamalla Ajaxille verkkosivulla. tai Joten joskus kestää jonkin aikaa palvelimen vastauksessa. Tai lähetä lomake verkkosivulle. Joten heti kun napsautat lomakkeen Lähetä -painiketta. Ja lomakkeen toimittaa Ajax. Joten jquery ajax -kiekkoa on käytettävä kaikissa näissä olosuhteissa.

reagoida alkuperäisen ajan valitsin

Tämä jQuery Ajax spinner kertoo käyttäjälle, että pyyntöä käsitellään parhaillaan. Se ei ole vielä valmis. Ja aina kun palvelinpyyntö on suoritettu loppuun, jQuery Ajax -kehruu poistetaan.

jQuery Ajax Loading Spinner Esimerkki

Noudata alla olevia ohjeita ja voit luoda jQuery Ajax Loading Spinnerin:

1. Luo index.html

Ensinnäkin sinun on luotava yksi index.html -tiedosto ja päivitettävä seuraava koodi tiedostoosi:

jQuery Ajax Loading Spinner Example Get Data

2. Luo yksi CSS -tiedosto

Seuraavaksi sinun on luotava yksi CSS -tiedosto ja päivitettävä seuraava koodi tiedostoosi:

body { background: #ececec; } /*Hidden class for adding and removing*/ .lds-dual-ring.hidden { display: none; } /*Add an overlay to the entire page blocking any further presses to buttons or other elements.*/ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.8); z-index: 999; opacity: 1; transition: all 0.5s; } /*Spinner Styles*/ .lds-dual-ring { display: inline-block; width: 80px; height: 80px; } .lds-dual-ring:after { content: ' '; display: block; width: 64px; height: 64px; margin: 5% auto; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

3. Luo yksi js -tiedosto

Luo sen jälkeen uusi js -tiedosto ja lisää seuraava koodi js -tiedostoosi:

// Define our button click listener $('#getDataBtn').click(function () { // On click, execute the ajax call. $.ajax({ type: 'GET', url: 'https://forbes400.herokuapp.com/api/forbes400?limit=400', dataType: 'json', beforeSend: function () { // Before we send the request, remove the .hidden class from the spinner and default to inline-block. $('#loader').removeClass('hidden') }, success: function (data) { // On Success, build our rich list up and append it to the #richList div. if (data.length > 0) { let richList = '
    '; for (let i = 0; i '; } richList += '
' $('#richList').html(richList); } }, complete: function () { // Set our complete callback, adding the .hidden class and hiding the spinner. $('#loader').addClass('hidden') }, }); });

Seuraava ja viimeinen vaihe, aiemmin luomasi css- ja js -tiedosto. Sisällytä molemmat tiedostot html -sivulle.

Näet sen Kuinka olemme sisällyttäneet css- ja js -tiedoston html -sivulle.

jQuery Ajax Loading Spinner Example Get Data

Johtopäätös

Täällä olet oppinut luomaan / lisäämään jQuery Ajax Loading Spinnerin html / Web -sivuille esimerkin avulla.

#javascript #jquery