Enviar variables PHP a Javascript con AJAX sin recargar la página

Enviar variables entre PHP y Javascript

 

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:

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:

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:

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:

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.

 

Compartir esta entrada.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

CAPTCHA ImageChange Image