I denna snabba tips visar jag dig hur du laddar data från en XML-fil till en tom sida. Vi arbetar med $ .get-funktionen och kommer också att implementera en laddningsgif medan informationen hämtas. Vi visar en enkel lista över rekommenderade webbutvecklingsböcker. Låt oss gå och börja.

Steg ett: Granska skriptet

Låt oss först titta på vår enkla XML-fil. Det innehåller bara några böcker tillsammans med deras titel, bild och beskrivning.

    info går här.     info går här.     info går här.    

Låt oss då ta en titt på den faktiska jQuery.

 $ (dokument) .ready (funktion () $ .get ('myData.xml', funktion (d) $ ('body').
 Rekommenderade webbutvecklingsböcker 
'); $ ( 'Kropp'). Bifoga ('
'); $ (d) .find ("bok"). varje (funktion () var $ bok = $ (detta); var titel = $ book.attr ("title"); var description = $ book.find ') .text (); var imageurl = $ book.attr (' imageurl '); var html ='
  
'; html + = '
 '; html + = '
'+ titel +'
'; html + = '
 '+ beskrivning +'
'; html + = '
'; $ (Dl) bifoga ($ (html)). $ (LoadingPic.) Fadeout (1400). ); ); );

Steg två: Dechiffrera tiden

Eftersom det här är ett snabbt tips, kör jag igenom manuset lite snabbare än vad jag brukar göra. När dokumentet är redo att manipuleras, kommer vi hämta vår XML-fil med funktionen "$ .get". I parentesen passerar vi platsen för filen, och sedan kör vi en återuppringningsfunktion. Jag använder variabeln "d" för att representera informationen som drogs från XML-filen. Därefter kommer vi att skapa en rubriktag och en definitionslista.

Fortsätt på, vi ska söka igenom XML-filen (d) och hitta taggen med titeln "bok". Med hänvisning till mitt dokument finns det tre böcker. Följaktligen måste vi köra "varje" -metoden för att kunna utföra en operation för varje bok. Kom ihåg att "var och en" är precis som "för" uttalandena. Det är ett sätt att springa igenom varje element i den förpackade uppsättningen.

I nästa block av kod definierar jag några variabler. För att få "titel" och "beskrivning" från vår XML-fil använder vi ".attr (value)" - där "värde" är lika med attributet inom taggen.

Slutligen skapar vi en variabel som heter "html" som innehåller html som visar informationen från vår XML-fil. Om du bara tilldelar den här informationen till variabeln kommer den inte att visas på sidan. För att lägga till den på sidan tar vi upp definitionlistan och lägger till variabeln. - $ ('dl'). Lägg till ($ (html));

En sak som är värt att nämna är att medan informationen hämtas från XML-filen visar vi ett standardladdningsgalleri (via en bakgrundsbild). När data har laddats tar vi bilden och bleknar den.

Du är klar

Jag vet att jag gick igenom det ganska snabbt; Så gärna lämna en kommentar och fråga eventuella frågor som du kanske har. Det bör noteras att detta skript kommer att kräva lite mer arbete innan det blir redo för en verklig världswebbplats. Du måste kompensera för personer som har Javascript avstängd. I det här fallet, om de hade tagit bort det, skulle de stirra på en tom sida. Du måste kompensera för sådana saker. Men jag avviker.