¿Estas atascado? ¡Yo te ayudo!, pregunta aquí.

Traer un contenido con Ajax al pulsar un enlace

Todo código relacionado exclusivamente con Javascript, como jquery, ajax, javascript en bruto, ...

Notapor alexiter » Sab Oct 03, 2015 8:06 am

En este sencillo ejemplo haremos llamada a Ajax, para traer un contenido, cuando se pulse un enlace.

Aquí podemos ver el enlace, al que ponemos un identificador (atributo id) para seleccionarlo desde jQuery.

Código: Seleccionar todo
<a href="#" id="enlaceajax">Haz clic!</a>


Si hemos leído hasta aquí el Manual de jQuery podremos saber cómo asignar un evento a un enlace. No obstante, recordemos cómo asignar una función para cuando se haga clic en el enlace:

Código: Seleccionar todo
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      //elimino el comportamiento por defecto del enlace
      evento.preventDefault();
      //Aquí pondría el código de la llamada a Ajax
   });
})


Ya se trata sólo de poner en marcha Ajax dentro de la función del evento "click" sobre el enlace. Pero antes voy a necesitar una capa donde mostrar el contenido que vamos a recibir del servidor con la llamada Ajax. Le pondremos id="destino" para poder referirnos a ella desde jQuery:

Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas con este framework Javascript. Una única línea de código será suficiente:

Código: Seleccionar todo
$("#destino").load("contenido-ajax.html");


Con esta simple sentencia estamos realizando una llamada a Ajax con jQuery. Es una simple invocación al método load() de un elemento de la página, en concreto el que habíamos puesto con id="destino". Al método load() le pasamos como parámetro la ruta de la página que queremos cargar dentro del elemento.

El archivo que cargamos con load() en este ejemplo es "contenido-ajax.html" y simplemente le hemos colocado un texto cualquiera. Lo hemos guardado en el mismo directorio que la página web donde está el script jQuery.

Nota: para que este ejemplo funcione debe colocarse en un servidor web, puesto que la llamada por Ajax se hace por http y el archivo que se carga entonces tiene que recibirse por un servidor web, que lo mande con ese protocolo al navegador. Si pones los archivos en tu disco duro y los ejecutas tal cual, no te funcionará. Puedes utilizar cualquier espacio de hosting que tengas o bien un servidor web que puedas tener instalado en tu ordenador.


Así de simple! Podemos ver el código completo de este ejemplo:
Código: Seleccionar todo
<html>
<head>
   <title>Ajax Simple</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("contenido-ajax.html");
   });
})
</script>
</head>
<body>

<a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino"></div>

</body>
</html>


Cabría comentar que jQuery tiene muchos otros métodos de realizar conexiones por Ajax, que pueden servir para muchos otros casos de trabajo que podemos encontrarnos por ejemplo pasar parámetros y ejecutar acciones después de la llamada a Ajax.

El método load() que hemos visto en el ejemplo anterior tiene otros dos parámetros opcionales que podemos utilizar si fuera necesario:
Parámetros a pasar a la página: la página que carguemos con Ajax puede recibir parámetros por la URL, que se especifican con la típica notación de propiedades y valores de jQuery.

Código: Seleccionar todo
{nombre: "Pepe", edad: 45}


Por ejemplo, con ese código estaríamos enviando a la página los datos nombre y edad, con los valores "pepe" y 45. Esos datos viajarían en la URL, por el método "POST".

Nota: Desde jQuery 1.3 también se pueden enviar los parámetros a la página a cargar con Ajax por medio de una variable de tipo string, en lugar de una notación de objetos como hemos comentado. Cuando se use un string para especificar los parámetros a enviar en el request http, éstos viajan por el método GET. Cuando se utiliza una notación de objetos como la que hemos visto, los datos viajan por el método POST.


Función callback: como otros métodos de jQuery, podemos especificar opcionalmente una función a ser ejecutada cuando se termine de ejecutar el método. En este caso, cuando se termine la llamada Ajax, se pueden hacer acciones, como borrar un mensaje típico de "cargando...".



Ahora veamos un código donde hacemos uso de estos dos parámetros:
Código: Seleccionar todo
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){
         alert("recibidos los datos por ajax");
      });
   });
})


En este caso estamos cargando con load() una página PHP llamada "recibe-parametros.php". Estamos pasando los parámetros "nombre" y "edad" a una página, que podremos recoger por GET. Además, hemos colocado una función callback en la que simplemente hacemos un alert(), que se ejecutará cuando la llamada a Ajax haya terminado.

Este sería el código fuente de "recibe-parametros.php":

Recibido el siguiente dato:
Código: Seleccionar todo
<br>
Nombre: <?php echo $_POST["nombre"];?>
<br>
Edad: <?php echo $_POST["edad"];?>


Con esto hemos podido comprobar lo sencillo que es realizar con jQuery una carga de contenidos que se reciben por Ajax. Como decía, existen muchas otras maneras de hacer conexiones Ajax con jQuery, como el ejemplo mostrar un mensaje de carga miestrás esperamos la respuesta Ajax del servidor.
alexiter
Site Admin
 
Mensajes: 157
Registrado: Dom Nov 17, 2013 9:54 pm

Volver a Javascript (jquery, ajax, ...)

cron
  • Buscar mensajes nuevos
  • Buscar temas sin respuesta
  • ¿Quién está conectado?
  • En total hay 1 Usuario identificado :: 0 registrado, 0 ocultos y 1 invitado (basados en usuarios activos en los últimos 5 minutos)
  • La mayor cantidad de usuarios identificados fue 619 el Dom May 03, 2020 11:11 pm
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado