Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Consejo rápido: usa jQuery para recuperar datos de un archivo XML

by
Read Time:3 minsLanguages:

Spanish (Español) translation by Andrijana Mitevska (you can also view the original English article)

En este consejo rápido, te mostraré cómo cargar datos de un archivo XML en una página en blanco. Trabajaremos con la función $.get y también implementaremos un gif de carga mientras se recupera la información. Mostraremos una lista simple de libros de desarrollo web recomendados. Sigamos adelante y comencemos.

Paso uno: revisa el script

Primero, echemos un vistazo a nuestro simple archivo XML. Simplemente contiene algunos libros junto con su título, imagen y descripción.

A continuación, echemos un vistazo al jQuery real.

Paso dos: es momento de descifrar

Como este es un consejo rápido, revisaré el script un poco más rápido de lo que normalmente lo haría. Cuando el documento esté listo para ser manipulado, vamos a buscar nuestro archivo XML usando la función "$.get".  Entre paréntesis, pasaremos la ubicación del archivo y luego ejecutaremos una función de devolución de llamada. Usaré la variable "d" para representar la información que se extrajo del archivo XML. A continuación, crearemos una etiqueta de encabezado y una lista de definiciones.

Continuando, buscaremos en el archivo XML (d) y encontraremos la etiqueta titulada "libro". Volviendo a mi documento, hay tres libros. En consecuencia, necesitaremos ejecutar el método "each" para realizar una operación para cada libro. Recuerda, "each" es como las declaraciones "for". Es una forma de recorrer cada elemento del conjunto envuelto.

En el siguiente bloque de código, estoy definiendo algunas variables. Para obtener el "título" y la "descripción" de nuestro archivo XML, usamos ".attr(valor)", donde "valor" es igual al atributo dentro de la etiqueta.

Por último, estamos creando una variable llamada "html" que contendrá el html que mostrará la información de nuestro archivo XML. Sin embargo, la mera asignación de esa información a la variable no la mostrará en la página. Para agregarlo a la página, tomamos la lista de definiciones y agregamos la variable. - $('dl'). append ($(html));

Una cosa más que vale la pena mencionar es que, mientras se recupera la información del archivo XML, mostraremos un gif de carga estándar (a través de una imagen de fondo). Cuando los datos se hayan cargado, tomaremos la imagen y la desvaneceremos.

Ya terminaste

Sé que pasé por eso un poco rápido; así que siéntete libre de dejar un comentario y hacer cualquier pregunta que puedas tener. Cabe señalar que este script requerirá un poco más de trabajo antes de que esté listo para un sitio web del mundo real. Tienes que compensar a las personas que tienen Javascript desactivado. En este caso, si se lo hubieran quitado, estarían mirando una página en blanco. Debes compensar esas cosas. Pero estoy divagando.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.