Cómo enviar datos de formulario con PHP sin refrescar la página utilizando Ajax

¿Intentas mostrar datos de una base de datos sin actualizar la pagina web?

Seguramente habias pensado alguna vez en la forma de realizar alguna consulta a la base de datos o simplemente ejecutar metodos de PHP sin necesidad de actualizar el navegador. ¡No te preocupes! es posible. A continuación te presento una opción de cómo puedes hacerlo utlizando Ajax con Jquery.

¿Qué es Ajax?

Ajax es un metodo de Jquery el cual te permite una forma de trabajo en la que tienes la posiblidad de actualizar sólo ciertas partes de una pagina web, de esta forma puedes realizar diferentes peticiones sin necesidad de cambiar de página o actualizarla. 

¿Cómo comenzamos?. Lo primero que tenemos que hacer es incluir la libreria de jquery para poder trabajar con Ajax:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Tendremos un archivo llamado "index.php" el cual será el archivo principal de donde enviaremos los datos a través de dos text.

El archivo "index.php" contendrá el siguiente código.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
       <!-- jQuery library -->
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
       <script type="text/javascript" src ="script.js"></script>

</head>
<body>
Nombre: <input type="text" id="nombre"> <br>
Mensaje: <input type="text" id="mensaje"> <br>
<input type="button" name="enviar" value="Enviar" href="javascript:;" onclick="Hola($('#nombre').val(),$('#mensaje').val());">
<div id="resultado"></div>
</body>
</html>

El archivo "script.js" recibirá los parametros enviados por el evento "onclick" a una función llamada "hola". Esta función a su vez ejecutara el método $.ajax el cual es configurado a través de un objeto, el cual contiene ciertas propiedades que necesita jQuery para completar la petición.  Para este ejemplo utilizaremos las siguientes:

 url : Indicará la URL del archivo al cual se le harán las peticiones (archivo al que se enviarán datos)
 data : Indicará la información a enviar (también se puede utilizar una cadena de datos)
 type : Indicará el tipo de petición (POST/GET)
 beforeSend : Acciones que se ejecutarán antes de recibir alguna respuesta del archivo al que se harán peticiones.
 success : Acciones que se ejecutarán cuando la petición se haya realizado correctamente (En este caso; en laetiqueta div con el id="resultado").

Dicho esto, la función "Hola" queda de la siguiente forma:

function Hola(nombre,mensaje) {
     var parametros = {"Nombre":nombre,"Mensaje":mensaje};
$.ajax({
    data:parametros,
    url:'procesoAjax.php',
    type: 'post',
    beforeSend: function () {
        $("#resultado").html("Procesando, espere por favor");
    },
    success: function (response) {    
        $("#resultado").html(response);
    }
});
}

 

Por último, el archivo "procesoAjax.php" recibirá los datos y los mostrará en un "echo":

<?php 
echo "Estás usando Ajax <br> ".$_POST["Nombre"]." ".$_POST["Mensaje"];
?>

Espero te haya gustado este sencillo ejemplo. Si tienes alguna duda, dejala en los comentarios

 

 

Programación web
SOBRE EL AUTOR
Javi Zamora
Javi Zamora

Hola soy Javier creador de Visión Código con la intención de ayudar a los nuevos jovenes programadores con pequeños tutoriales que te salvan la vida.