Enviar variables  PHP a Javascript con AJAX y recibir respuesta sin recargar la página.

En este post trataremos de aprender a cómo enviar variables de PHP a Javascript  con AJAX y recibir respuesta sin tener que recargar la página. 

Ésto se suele realizar utilizando AJAX.

En el post anterior aprendimos a procesar datos enviados desde un formulario a un archivo PHP y a recibir la respuesta sin tener que recargar la página. En este post enviaremos datos PHP y los convertiremos en variables Javascript. Pueden ser desde  imágenes o cualquier otro elemento.

Envío de variables PHP desde link en una imagen.

Supongamos que tenemos un grupo de 10 imágenes generadas desde una consulta a la base de datos. A parte de la imagen,hemos recibido su id y su nombre.

Para crear la lista de imágenes, utilizaremos el siguiente código para cada imagen en nuestra página inicial:

<a class="foto"
     data-id="<?php echo $id_de_la_imagen;?>"
     data-name="<?php echo $name_de_la_imagen;?>"
>
<img  src="url_de_la_imagen">
</a>

Observarás que introducimos las imagenes en una etiqueta <a> para generar un enlace. Además, utilizamos data-id y data-name para añadir nuestras variables a ese enlace para enviarlas cuando pulsemos sobre él.

Puedes añadir tantos data- como necesites.

Ahora, en nuestra página inicial, añadimos la zona donde queremos recibir la respuesta. En este caso, simplemente mostraremos el id y el nombre de la imagen:

<h2 id="id_de_la_imagen"></h2>
<h3 id="nombre_de_la_imagen"></h2>

Y en nuestro archivo script.js, que ya sabemos que hemos de cargarlo al final de nuestra página inicial, añadimos el siguiente código:

$(document).ready(function(){
  $(document).on('click', '.foto', function(){

   var id = $(this).data('id');
   $('#id_de_la_imagen').text( id);

   var nombre = $(this).data('name');
   $('#nombre_de_la_imagen').text( nombre);  

 });
});

Como verás, cuando detecta la pulsación sobre la imagen (.foto), envía el valor de los data-id y data-name. Después muestra esos valores en el lugar que hemos escogido. Puedes hacer cualquier otro tipo de operaciones, ya que tienes esas variables disponibles en Javascript.

Te pongo un ejemplo:

$(document).ready(function(){
  $(document).on('click', '.foto', function(){
   //----cargamos un loader mientras trabaja
   $("#load").show();

   var id = $(this).data('id');
   var nombre = $(this).data('name');
   $.ajax({                    
    type: "post",
    url: "functions.php",
    data:$(this).serialize(),
    beforeSend: function(){
        },
        complete:function(data){                             
        },
        success: function(data){
        $('#respuesta').html(data); 
       },
       error: function(data){
       }
     });
 });
});

Cuando pulsamos la foto class=»foto»

• Captura las variables data-id y data-name y las convierte en variables Javascript id y nombre.
• Muestra el elemento con id=»load» mientras esperamos respuesta.
• Envía las variables por POST a functions.php
• Una vez procesada la información, la respuesta la muestra en el elemento con id=»respuesta» en nuestra pagina principal sin recargar la página.

Espero que te haya sido interesante. No dudes en comentar.