jQuery
jQuery
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Los programadores de hoy en día dependemos del framework/librería javascript jQuery en muchos casos, así que este tutorial va derecho a las operaciones que suelen ser más utilizadas a la hora de trabajar con él, éstas serán peticiones post, get, json, el método ajax, load, enviar variables clave/valor, procesar formularios y recorrer los datos obtenidos de una base de datos, el tema de jsonp no lo pongo aquí porque está explicado en este post, también veremos el método ajaxSetup, el cuál nos permite realizar una configuración por defecto para todas nuestras peticiones, la ventaja de esto es que después las podemos sobrescribir sin ningún tipo de problema, así que con esto podemos empezar explicando cada uno de los métodos para que sea más sencillo de asimilar el tutorial.

  • Método $.get:
  • El método get suele ser utilizado para obtener información de una base de datos/archivo/webservice.

  • Método $.post:
  • El método post sin embargo, se suele utilizar para enviar datos vía post y poder almacenar u obtener.

  • Método $.ajax:
  • Con el método ajax podemos utilizar tanto get como post, así que es ideal para cualquier de los casos, también podemos especificar el tipo de datos que queremos obtener, en la clave datatype le podemos decir que será xml, json, script o html.

  • Método $.getJSON:
  • El método getJSON es utilizado para obtener datos formato json, pero tiene menos utilidad porque especificando el datatype del método ajax obtenemos el mismo resultado con más opciones.

  • Método $.ajaxSetup:

  • Gracias al método ajaxSetup podemos especificar una configuración global a nuestras peticiones ajax, podemos decir por defecto el comportamiento de la función error, success, complete o beforeSend, es una buena opción, y lo bueno de esto es que puede ser sobrescrita, así que no es una buena opción, es la mejor!.

  • Método $.load:
  • Gracias al método load podemos hacer una petición vía post(con este método las peticiones son vía post) e insertar esa información en un elemento html de nuestra web, por ejemplo una vista completa.

  • Loops en jQuery, parsear y recorrer:

  • La mayoría de las veces que obtenemos datos de forma asíncrona retornamos datos en formato json listos para parsear y recorrer para hacer o bien comprobaciones o mostrar en algún elemento de nuestro documento, aquí entran los loops en jQuery, como veremos tenemos varios y todos muy útiles, así que es bueno conocer por lo menos los principales, en nuestro caso haremos uso de los loops for in, each y for, conociendo estos tenemos más que suficiente :D.

Con esa explicación estamos listos para ver los ejemplos en acción.

¿Te interesa el curso de jQuery?

obtén más información ahora

En cursosdesarrolloweb tienes toda la información que puedas necesitar sobre el curso de jQuery y muchos más.


Lo primero que vamos a crear será el archivo index.php, en el cuál colocaremos unos botones para probar los ejemplos, así que creamos un proyecto y dentro un archivo index.php y colocamos el siguiente código.

Lo primero que crearemos será otro archivo que se llamará consultas.php, y dentro colocaremos el siguiente código, el cuál simplemente comprobará si es una petición post o get e imprimirá el resultado, nada más.

El archivo jquery.js que cargamos en la sección head es donde crearemos nuestros ejemplos, así que podemos pasar a crearlo e ir añadiendo ejemplos progresivamente.

El método get

El método $.post

Serializar un formulario con $.post

Como podemos ver, lo anteriores métodos son prácticamente iguales, excepto que uno envía la info via post y el otro vía get, nada más, ahora pasemos con el que es capaz de controlar ambos métodos y añadir más configuraciones, el método $.ajax.

El método $.ajax

El método $.getJSON

Para este ejemplo utilizamos otro archivo en formato json, el cuál nos devuelve datos en formato json, así que lo podemos crear y añadir el siguiente código dentro del mismo.

El método $ajaxSetup

En este caso, al pulsar el botón ajaxSetup veremos un alert informando de un error 404 ya que el archivo test.php no existe, muy útil.

Sobrescribiendo $ajaxSetup

El método $.load

Gracias a él podemos colocar contenido sin refrescar en cualquier zona de nuestra web, perfecto. Para nuestro ejemplo podemos crear un archivo llamado load.html y dentro colocar un sencillo documento html.

Al pulsar el botón load, en el div con clase contenedor veremos como aparece la información del archivo load.html.

Loops en jQuery, obtener, parsear y recorrer

Lo primero que debemos crear es una base de datos mysql e importamos la siguiente tabla con datos.

Ahora podemos crear un archivo que hace una consulta a nuestra base de datos y retorna los posts en formato json, así que le podemos llamar query_mysql.php y dentro colocamos el siguiente código.

Finalmente podemos obtener esta información y ver como podemos parsear y recorrer con los loops for in, each y for, veamos.

Y eso es todo, no hay nada que explicar, lo más complicado está explicado en el código, el resto es sencillo y bastante claro,así que me despido y espero que te sea de utilidad.

Si te ha sido útil el post puedes utilizar los botones de las redes sociales para ayudarme con mi trabajo :D.