Com llegir XML a JavaScript mitjançant jQuery | Ajax

Bloc

Com llegir XML a JavaScript mitjançant jQuery | Ajax- La biblioteca jQuery JavaScript és més coneguda pel seu ús en HTML, però també podeu utilitzar-la per processar XML. Aquest article mostra com utilitzar jQuery per processar un magatzem de dades en format XML.

Vaig a compartir alguns trucs sobre el processament de fitxers XML i API. També demostraré com una pàgina web pot obtenir informació d'un fitxer XML a JavaScript mitjançant JQuery AJAX.

A suposicions : als efectes d’aquest article, suposo que teniu una bona comprensió i coneixement de JavaScript, el format de fitxer XML i jQuery. En cas contrari, trobeu documentació aquí per obtenir més informació al respecte.

Editor d'imatges de llenç html5

El projecte en què he treballat recentment consistia en processar dades XML resultants d’una trucada a l’API. El fitxer ** Data XML ** resultant era molt gran i el seu contingut són dades privades que no puc compartir. * Per tant, en aquest post, us mostraré com processar una demostració XML XML *** dossier.

A continuació es mostra el fitxer XML de mostra de w3chools que faré servir per a la demostració:

Belgian Waffles .95 Two of our famous Belgian Waffles with plenty of real maple syrup 650 Strawberry Belgian Waffles .95 Light Belgian waffles covered with strawberries and whipped cream 900 Berry-Berry Belgian Waffles .95 Light Belgian waffles covered with an assortment of fresh berries and whipped cream 900 French Toast .50 Thick slices made from our homemade sourdough bread 600 Homestyle Breakfast .95 Two eggs, bacon or sausage, toast, and our ever-popular hash browns 950

Ara, creeu una carpeta per al projecte de demostració i deseu-hi el fitxer demo.xml. Vaig posar el meu nom Demo XML . A la carpeta del projecte, creeu un fitxer JavaScript i un fitxer HTML que mostrarà les dades (index.html i main.js). No estic utilitzant un fitxer CSS separat per a l'estil.

Recomano utilitzar-lo Visual Studio Code IDE per a aquesta demostració i a la instal·lació del vostre codi VS Servidor en directe extensió.
A continuació es mostra una captura de pantalla de la meva carpeta de demostració oberta al codi VS:

Captura de pantalla VS Code IDE: mostra els fitxers

sincronització ftp de text sublim

El següent pas és afegir les referències de script i jQuery-UI al vostre index.html i definir com voleu mostrar les dades. Simplement mostro dades en un element ul. A continuació s’explica el meu index.html:

XML-Jquery