În acest sfat rapid, vă voi arăta cum să încărcați datele dintr-un fișier XML pe o pagină goală. Vom lucra cu funcția $ .get și vom implementa și un gif de încărcare în timp ce informațiile vor fi preluate. Vom afișa o listă simplă de cărți recomandate de dezvoltare web. Să mergem mai departe și să începem.

Pasul unu: Examinați scriptul

Mai întâi, să aruncăm o privire la fișierul nostru XML simplu. Ea conține doar câteva cărți împreună cu titlul, imaginea și descrierea lor.

    info aici.     info aici.     info aici.    

Apoi, să aruncăm o privire la jQuery reală.

 $ (document) .ready (functie () $ .get ('myData.xml', functie (d) $ ('
 Cărți recomandate de dezvoltare web 
„); $ ( 'Organism'). Append (“
„); $ (d) .find ('carte') fiecare (function () var $ book = $ (this); var title = $ book.attr ("title" 'var' = '' '' ';
  
„; html + = '
 „; html + = '
'+ titlu +'
„; html + = '
 '+ descriere +'
"; html + = '
„; $ ( 'Dl'), adăugați ($ (HTML)).; $ ( 'LoadingPic.') FadeOut (1400).; ); ); );

Pasul al doilea: timpul de descifrare

Pentru că acesta este un sfat rapid, voi trece prin script mai repede decât mi-ar face. Când documentul este gata să fie manipulat, vom prelua fișierul XML utilizând funcția ".get". În paranteză, vom trece în locația fișierului și apoi vom rula o funcție de retur. Voi folosi variabila "d" pentru a reprezenta informațiile care au fost extrase din fișierul XML. Apoi, vom crea o etichetă de titlu și o listă de definiții.

Continuând, vom căuta prin fișierul XML (d) și vom găsi eticheta intitulată "carte". Referindu-mă la documentul meu, există trei cărți. În consecință, va trebui să executați metoda "fiecare" pentru a efectua o operațiune pentru fiecare carte. Rețineți că "fiecare" este la fel ca și declarațiile "pentru". Este o modalitate de a trece prin fiecare element din setul înfășurat.

În următorul bloc de cod, definesc câteva variabile. Pentru a obține "titlu" și "descriere" din fișierul nostru XML, folosim ".attr (value)" - unde "value" este egal cu atributul din tag.

În cele din urmă, creăm o variabilă numită "html" care va conține html-ul care va afișa informațiile din fișierul nostru XML. Simpla atribuire a acelei informații variabilei nu o va afișa pe pagină. Pentru a le adăuga la pagină, luăm lista de definiții și adăugăm variabila. - $ ('dl'); adăugați ($ (html));

Un lucru mai remarcabil este faptul că, în timp ce informațiile sunt preluate din fișierul XML, vom afișa un gif de încărcare standard (prin intermediul unei imagini de fundal). Când datele s-au încărcat, vom lua imaginea și vom dispărea.

Ați terminat

Știu că am trecut prin asta destul de repede; Deci, nu ezitați să lăsați un comentariu și să puneți întrebări pe care le puteți avea. Trebuie remarcat faptul că acest script va necesita un pic mai mult de lucru înainte de a fi pregătit pentru un site web real. Trebuie să compensați persoanele care au dezactivat Javascript. În acest caz, dacă l-ar fi dezactivat, ar fi privit la o pagină goală. Trebuie să compensați aceste lucruri. Dar, mă îndepărtez.