Enviar variables PHP utilizando AJAX y recibir respuesta sin recargar la página.
En este post trataremos de aprender a cómo enviar variables desde PHP y recibir respuesta sin tener que recargar la página. Ésto se suele realizar utilizando AJAX.
Muchos preguntan cómo enviar variables de PHP a Javascript JS utilizando AJAX y sin recargar la página. En algunas ocasiones necesitamos enviar datos de algun formulario para procesarlos después, pero también podemos querer hacerlo desde algún enlace o link en nuestra página web.
Este problema te lo podrás encontrar muy a menudo cuando realizas tus programaciones, ya sean web apps o simples sistemas CRUD que gestionan una base de datos y no quieres que se recargue continuamente.
Empezaremos por el principio, con los formularios.
Envío de datos de formulario.
Un formulario recoge los datos introducidos en sus campos y , en el momento de pulsar el botón SUBMIT, los envía a un archivo PHP mediante el método POST o GET (Aquí os hablo algo de éstos métodos).
Aquí tenemos un simple formulario que envia los datos al archivo functions.php
<form id="" action="functions.php" method="POST" role="form"> <div class="form-group"> <label for="">Tu nombre</label> <input type="text" class="form-control" name="nombre" placeholder="Input field"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>
Para mostrar los datos bastará con escribir en functions.php un simple:
print_r($_POST);
o en este caso, como sabemos la key de la variable, escribimos:
echo $_POST['nombre'];
De ésta manera, nos mostrará el nombre escrito en el formulario. Pero lamentablemente nos habrá redirigido a la página functions.php. Y lo que buscamos es que nos muestre esa información sin salir de nuestra página inicial. Éso nos lo arregla AJAX.
y, ¿qué es AJAX?.
AJAX es un conjunto de técnicas de desarrollo web que permiten que las aplicaciones web funcionen de forma asíncrona, procesando cualquier solicitud al servidor en segundo plano. Cualquier web que use AJAX puede enviar y recuperar datos del servidor sin la necesidad de volver a cargar toda la página.
Vamos a ver cómo lo hacemos.
Partimos del mismo formulario simple anterior, pero modificaremos la etiqueta <form> de la siguiente manera:
<form id="desdeFormulario" action="functions.php" method="POST" role="form">
Simplemente le hemos añadido un nombre de id.
Como puedes ver, este formulario se envía al archivo PHP que hemos llamado functions.php
Aquí es donde recibiremos la supervariable POST y procesaremos la información que necesitemos. En este caso simplemente mostraremos un «hola» seguido del nombre introducido.
<?php
if(isset($_POST)){
$nombre = $_POST['nombre'];
echo 'Buenos dias '.$nombre;
}
Pero podemos hacer consultas a bases de datos, cálculos matemáticos…. lo que queramos.
Ahora, si pruebas tu código, verás que en el momento que escribes tu nombre y pulsas el botón enviar, te redigirá a la página functions.php y te dará un saludo. Pero no queremos que nos cambie de página, queremos recibir ese saludo en la página inicial.
Para ésto sólo son necesarios 4 pasos:
1. Cargamos la librería Jquery en nuestra web, entre las etiquetas <head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
2. Añadir el lugar donde queremos recibir la respuesta, en este caso un saludo:
<h2 id='respuesta'></h2>
3. Añadir el código AJAX necesario a nuestro archivo script.js que,
- capturará los datos del formulario en el momento del envío evitando la redirección
- procesará la respuesta
- la enviará al lugar que hemos determinado
$(document).ready(function () {
$("#desdeFormulario").bind("submit",function(e){
// Capturamnos el boton de envío
$.ajax({
type: $(this).attr("method"),
url: $(this).attr("action"),
data:$(this).serialize(),
beforeSend: function(){
/* ejecuta durante el envió de la petición al servidor. */
},
complete:function(data){
/* Se ejecuta al termino de la petición */
},
success: function(data){
/* Se ejecuta cuando termina la petición y esta ha sido correcta */
$('#respuesta').html(data);
},
error: function(data){
/* Se ejecuta si la peticón ha sido erronea */
}
});
// Nos permite cancelar el envio del formulario
e.preventDefault();
});
});
4. Añadir la carga de nuestro archivo script.js a nuestra página inicial
<script src="script.js"></script>
Pruébalo y no dejes de comentar.
Hasta pronto !!