I dette raske tipset vil jeg vise deg hvordan du laster inn data fra en XML-fil på en tom side. Vi jobber med $ .get-funksjonen og vil også implementere et lastepig mens informasjonen hentes. Vi viser en enkel liste over anbefalte webutviklingsbøker. La oss gå videre og komme i gang.

Trinn ett: Gjennomgå scriptet

Først, la oss ta en titt på vår enkle XML-fil. Den inneholder bare noen få bøker sammen med tittel, bilde og beskrivelse.

    info går her.     info går her.     info går her.    

Neste, la oss ta en titt på selve jQuery.

 $ (dokument) .ready (funksjon () $ .get ('myData.xml', funksjon (d) $ ('body').
 Anbefalte webutviklingsbøker 
'); $ ( 'Body'). Append ('
'); $ (d) .find ('bok'). hver (funksjon () var $ bok = $ (dette); var tittel = $ book.attr ("title"); var description = $ book.find ') .text (); var imageurl = $ book.attr (' imageurl '); var html ='
  
'; html + = '
 '; html + = '
'+ tittel +'
'; html + = '
 '+ beskrivelse +'
'; html + = '
'; $ ( 'Dl') føyer ($ (html).); $ ( 'LoadingPic.') Fadeout (1400).; ); ); );

Trinn to: Dekrypter Tid

Fordi dette er et raskt tips, vil jeg løpe gjennom skriptet litt raskere enn jeg vanligvis ville. Når dokumentet er klar til å bli manipulert, skal vi hente vår XML-fil ved hjelp av "$ .get" -funksjonen. I parentesen vil vi passere plasseringen av filen, og deretter kjører vi en tilbakeringingsfunksjon. Jeg bruker variabelen "d" til å representere informasjonen som ble trukket fra XML-filen. Deretter skal vi lage en overskriftskode og en definisjonsliste.

Fortsett på, vi skal søke gjennom XML-filen (d) og finne taggen med tittelen "bok". Å referere tilbake til dokumentet mitt, er det tre bøker. Derfor må vi kjøre "hver" metoden for å kunne utføre en operasjon for hver bok. Husk at "hver" er akkurat som "for" -klæringene. Det er en måte å løpe gjennom hvert element i det innpakket settet.

I den neste kodenes kode definerer jeg noen få variabler. For å få "tittel" og "beskrivelse" fra vår XML-fil, bruker vi ".attr (verdi)" - der "verdi" er lik attributten i taggen.

Til slutt lager vi en variabel kalt "html" som inneholder html som vil vise informasjonen fra vår XML-fil. Bare å tilordne den informasjonen til variabelen, vil ikke vise den på siden. For å legge den til på siden, tar vi tak i definisjonslisten og legger til variabelen. - $ ('dl'). legg til ($ (html));

En ting som er verdt å nevne er at mens informasjonen hentes fra XML-filen, viser vi et standardlastegift (via et bakgrunnsbilde). Når dataene er lastet, tar vi bildet og taper det ut.

Du er ferdig

Jeg vet at jeg gikk gjennom det litt raskt; Så vær så snill å legge igjen en kommentar og stille spørsmål du måtte ha. Det skal bemerkes at dette skriptet vil kreve litt mer arbeid før det blir klar for en ekte verdens nettside. Du må kompensere for personer som har Javascript slått av. I dette tilfellet, hvis de hadde hatt det, ville de stirre på en tom side. Du må kompensere for slike ting. Men jeg går av.