Aprende como hacer peticiones Ajax con Jquery para cargar y enviar datos sin recargar la pagina.

Share on Pinterest
Comparte con tus amigos










Enviar

En este artículo vamos a aprender cómo realizar peticiones Ajax básicas. Destacar que Ajax no es un lenguaje de programación, sino una técnica para crear mejores y más aplicaciones web interactivas.

También mencionar que para este articulo necesitas tener conocimientos previos de Jquery.

Con Ajax podremos hacer peticiones HTTP (GET y POST) sin necesidad de recargar la página con la consiguiente mejora de rendimiento y menor uso de ancho de banda, ya que sólo pedimos lo que necesitamos y lo cargamos dinámicamente en nuestra web.

En este caso las vamos a realizar con Jquery, ya que nos simplifica la tarea.  Jquery dispone de muchos métodos para realizar las peticiones (http://www.w3schools.com/jquery/jquery_ref_ajax.asp), pero en este caso me centraré en el genérico $.Ajax(). A este método podemos pasarle distintos parámetros según nuestras necesidades, algunos de los más comunes son los siguientes:

  • Url: indica la url donde enviaremos la petición.
  • Type: especifica el tipo de petición (GET o POST).
  • Data: datos que enviamos junto a la petición. Por ejemplo si el tipo es ‘get’, es equivalente a los parámetros que le pasaríamos a la url (?nombre=Luis&apellidos=lopez).
  • DataType: tipo de datos que esperamos en la repuesta del servidor (XML, HTML, JSON, SCRIPT).
  • Async: Para elegir s queremos una petición síncrona o asíncrona.

Una vez terminada la petición Ajax, tenemos 3 métodos con los que podemos recoger los datos recibidos, o controlar si ha habido algún error, o simplemente hacer algo cuando termine la petición.

.done: Si la petición Ajax se ha realizado correctamente, entra en este método. En data están los datos enviados por el servidor.

.fail: Se ejecuta si ha ocurrido algún problema en la petición, por ejemplo cuando la url especificada no existe.

.always: Como su nombre indica, se ejecuta siempre, independientemente si la petición es correcta o no. Muy útil si por ejemplo queremos quitar una imagen o texto indicando que se están cargando datos.

Ejemplo de una peticion Ajax con Jquery

Con el siguiente ejemplo, se ve más claro lo explicado anteriormente. Por ejemplo queremos cargar los datos de un usuario en una página de nuestra web al pulsar un cierto botón, en el evento onclick de dicho botón pondríamos la siguiente petición Ajax.

La petición la haremos a un archivo PHP llamado “getDataUser” que recogerá los datos del usuario cuya id es la pasada como parámetro post “idP”, en este caso 10. El tipo de petición es POST. Esto enviará una petición http POST, una vez acabada se muestra el mensaje “complete” ya que se ejecuta el método always, si hay algún error se ejecutará el método fail y mostrará “error”, y si todo ha salido bien escribiremos en nuestro html la respuesta, que serán los datos del usuario almacenados en “data”. Por ejemplo la respuesta puede ser una lista  en HTML con dichos datos.

Si por ejemplo queremos enviar todos los datos de un form, simplemente utilizamos la función $(#myForm).serializeArray() o $(#myForm).serialize(), y los podríamos recoger fácilmente en el lado del servidor.

Con esto nos podemos dar cuenta del potencial de Ajax, que cada vez va cobrando una mayor relevancia, ya que nos permite ser más eficientes en la petición y recogida de los datos.

Más información:

http://api.jquery.com/jquery.ajax/

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

Share on Pinterest
Comparte con tus amigos










Enviar

Enrique de la Torre

Twitter Google + Linkedin Acerca de

  • Joel Arraez

    primer comientaro

  • fausto_tnd

    Hola, me pregunto si con ajax podría hace peticiones de php, ¿o hay otras posibilidades? Graciass

    • Claro, con AJAX lo que haces es enviar parámetros a un archivo PHP donde se encuentra la petición o consulta, y recogerá los datos que ese archivo .PHP devuelva. Eso es lo que hace AJAX, sin que tenga que cambiar de página..

      • fausto_tnd

        AMmm.. Formulé mal la pregunta. Quise decir que si se pueden hacer otras cosas que no sean solo peticiones a PHP, como por ejemplo al pulsar un link redireccionar en segundo plano… Gracias de todos modos.

  • Jonathan Arias

    Podrias poner un ejemplo de un select dependiente con AJAX? Me interesa conocer el metodo para realizarlo. Muchas Gracias

    • Enrique de la Torre

      Hola, te refieres a que por ejemplo, cuando cambias el valor de un select de html te cargue unos datos nuevos?

      • Jonathan Arias

        Exacto, he visto varios tutos y son algo complejos, me gustaría aclarar que el valor nuevo viene de la base de datos. Muchas Gracias

        • Enrique de la Torre

          Utiliza la funcion “change” del select (Jquery), se ejecutará siempre que se cambie de valor el select. Dentro de dicha función, llamas con ajax por ejemplo a un fichero php donde recoges el valor de la BBDD, y en data le pasas algo para saber que hacer en el lado del servidor, si es el caso.

          $(“#myselect”).change(function(){

          $.ajax(

          {

          url : ‘getValorBBDD.php’,

          type: “POST”,

          data : { valorSelect: ‘XXX’ }

          })

          .done(function(data) {

          $(“#respuesta”).html(data);

          })

          .fail(function(data) {

          alert( “error” );

          })

          .always(function(data) {

          alert( “complete” );

          });

          });

  • Carlos Zúñiga

    Siempre con información clara y util. Gracias Falcon =D

    • Dale las gracias a Enrique de la Torre, el fue el que propuso y redacto el articulo.

      • Carlos Zúñiga

        Oh, ya veo, la costumbre jeje. Gracias Enrique =D

  • Porfirio Chavez

    Un formulario se puede enviar con cualquier evento, No subestimar el $(#myForm).serializeArray()

    Ya que el submit por defecto del formulario, puede crear un efecto no deseado en nuestro sitio.

  • Emmanuel Castro Pantoja

    Pudieras compartir un ejemplo donde el usuario envie informacion digamos de un formulario pero la pagina que lo va cachar tiene varias funciones como le hariamos para indicarle al .ajax con estos datos ve a tal funcion?

  • Victor Gracia

    Hola a todos, me parece muy buena opción desarrollar aplicaciones web con ajax y query para realizar peticiones al servidor.
    Me llamo Víctor Gracia y soy desarrollador de aplicaciones web en Zaragoza, trabajo a diario con estas herramientas y estos lenguajes de programación.

    Os comparto mi blog donde podéis algún tutorial para aprender a desarrollar en jquery, php y otros lenguajes.

    http://www.victorgraciaweb.com

    Saludos

  • nicolas

    muyy buen aporte gracias

  • Pablo Ruiz

    Hola,

    en el ejemplo cuando pasas el parámetro ‘López’ lo conviertes a ‘lopez’ eliminando la tilde ¿cómo lo enviarías con la tilde para que el servidor no tuviese problemas de codificación?

  • Oscar Arevalo

    Como logro utilizar un método que se encuentra en una clase que tiene muchos otros metodos, como indico yo que el que quiero es ese y utilizar ese resultado? de ante mano muchas gracias


Aprende con nuestros cursos

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 4: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso
Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso