In deze snelle tip laat ik u zien hoe u gegevens uit een XML-bestand op een lege pagina kunt laden. We werken met de $ .get-functie en zullen ook een laad-gif implementeren terwijl de informatie wordt opgehaald. We zullen een eenvoudige lijst met aanbevolen webontwikkelingsboeken weergeven. Laten we doorgaan en aan de slag gaan.

Stap één: bekijk het script

Laten we eerst eens kijken naar ons eenvoudige XML-bestand. Het bevat slechts een paar boeken samen met hun titel, afbeelding en beschrijving.

    info komt hier.     info komt hier.     info komt hier.    

Laten we vervolgens eens kijken naar het daadwerkelijke jQuery.

 $ (document) .ready (function () $ .get ('myData.xml', functie (d) $ ('body'). append ('
 Aanbevolen Web Development-boeken 
'); $ ( 'Body'). Toevoegen ('
'); $ (d) .find ('book'). each (function () var $ book = $ (this); var title = $ book.attr ("title"); var description = $ book.find ('description ') .text (); var imageurl = $ book.attr (' imageurl '); var html ='
  
'; html + = '
 '; html + = '
'+ titel +'
'; html + = '
 '+ description +'
'; html + = '
'; $ ( 'Dl') append ($ (html).); $ ( 'LoadingPic.') Fade-out (1400).; ); ); );

Stap twee: Ontcijfertijd

Omdat dit een snelle tip is, doorloop ik het script een beetje sneller dan ik normaal zou doen. Wanneer het document klaar is om te worden gemanipuleerd, gaan we ons XML-bestand ophalen met behulp van de functie "$ .get". Tussen haakjes geven we de locatie van het bestand door en voeren we een callback-functie uit. Ik zal de variabele "d" gebruiken om de informatie weer te geven die uit het XML-bestand is getrokken. Vervolgens gaan we een headingtag en een definitielijst maken.

Verder gaan we door het XML-bestand (d) en zoeken we de tag met de titel 'boek'. Terugkerende naar mijn document zijn er drie boeken. Daarom moeten we de "elke" methode uitvoeren om een ​​bewerking voor elk boek uit te voeren. Onthoud dat "elke" net zo is als de "voor" -instructies. Het is een manier om elk element in de ingepakte set te doorlopen.

In het volgende blok code definieer ik een paar variabelen. Om de "titel" en "beschrijving" uit ons XML-bestand te halen, gebruiken we ".attr (waarde)" - waarbij "waarde" gelijk is aan het kenmerk in de tag.

Ten slotte maken we een variabele met de naam "html" die de html bevat die de informatie uit ons XML-bestand zal weergeven. Het alleen toekennen van die informatie aan de variabele zal het echter niet op de pagina weergeven. Om het aan de pagina toe te voegen, pakken we de definitielijst en voegen we de variabele toe. - $ ('dl'). toevoegen ($ (html));

Nog iets dat het vermelden waard is, is dat, terwijl de informatie wordt opgehaald uit het XML-bestand, we een standaard laad-GIF weergeven (via een achtergrondafbeelding). Wanneer de gegevens zijn geladen, pakken we de afbeelding en vervagen deze.

U bent klaar

Ik weet dat ik daar ietwat snel doorheen ben gegaan; Dus voel je vrij om een ​​reactie achter te laten en vragen te stellen die je misschien hebt. Opgemerkt moet worden dat dit script een beetje meer werk vereist voordat het klaar is voor een echte wereld website. U moet mensen waarvoor Javascript is uitgeschakeld, compenseren. Als ze het in dit geval hadden, staarden ze naar een lege pagina. Je moet zulke dingen compenseren. Maar ik dwaal af.