Enviar formulario con AJAX y PHP

Enviar datos a PHP usando AJAX

En este post vamos a ver cómo enviar un formulario de HTML a PHP pero sin recargar la página, simplemente usando AJAX.

Recordemos que AJAX es una técnica que permite enviar y recibir datos de manera asíncrona, sin bloquear el hilo principal, además de ahorrar ancho de banda pues solo cargamos lo que se necesita.

Preparando el formulario

Vamos a comenzar con un formulario sencillo. Como vamos a obtener los datos de cada input de manera separada, no sería necesario usar la etiqueta form, pero lo dejamos de igual manera para identificarlo.

<!doctype html>
<html lang="es">
    <!--
Envío de formulario usando AJAX y PHP

https://parzibyte.me/blog
-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,
            shrink-to-fit=no">
        <meta name="description" content="Formulario de login con Bootstrap">
        <meta name="author" content="Parzibyte">
        <title>Enviar formulario AJAX con PHP</title>
    </head>

    <body>
        <h2>Enviar formulario</h2>
        <a href="//parzibyte.me/blog">By Parzibyte</a>
        <form>

            <label for="nombre">Nombre</label>
            <br>
            <input id="nombre" name="nombre"
                class="form-control" type="text"
                placeholder="Nombre">
            <br><br>
            <label for="correo">Correo</label>
            <br>
            <input id="correo" name="correo"
                class="form-control" type="email"
                placeholder="Correo electrónico">
            <br><br>
            <label for="edad">Edad</label>
            <br>
            <input id="edad" name="edad"
                class="form-control" type="number"
                placeholder="Edad">
            <br><br>
            <div id="respuesta">

            </div>
            <button id="btnEnviar" type="button">
                Enviar
            </button>
        </form>
        <script src="./script.js"></script>
    </body>

</html>

Lo que hacemos es definir 3 campos para introducir valores (cada uno tiene su identificador) así como un div para poner la respuesta, y un botón para enviar el formulario.

Si visitamos el formulario se ve así:

Enviar formulario usando AJAX (bueno, fetch)

Ahora le vamos a dar funcionamiento con JavaScript. Vamos a hacer que en el click del botón se envíe un objeto con todo el formulario. El script queda así:

const $nombre = document.querySelector("#nombre"), // los 3 input
    $correo = document.querySelector("#correo"),
    $edad = document.querySelector("#edad"),
    $btnEnviar = document.querySelector("#btnEnviar"), // El botón que envía el formulario
    $respuesta = document.querySelector("#respuesta"); // el div que muestra mensajes

// Agregar listener al botón
$btnEnviar.addEventListener("click", () => {
    // Poner un estado de "enviando"
    $respuesta.textContent = "Cargando...";
    // Armar objeto con datos
    const datos = {
        nombre: $nombre.value,
        correo: $correo.value,
        edad: $edad.value,
    };
    // Codificarlo como JSON
    const datosCodificados = JSON.stringify(datos);
    // Enviarlos
    fetch("./procesar.php", {
            method: "POST", // Enviar por POST
            body: datosCodificados, // En el cuerpo van los datos
        })
        .then(respuestaCodificada => respuestaCodificada.json()) // Decodificar JSON que nos responde PHP
        .then(respuestaDecodificada => {
            // Aquí ya tenemos la respuesta lista para ser procesada
            $respuesta.textContent = respuestaDecodificada;
        });
});

Lo que hacemos es obtener una referencia a los input, al botón y al div usando querySelector. En el click del botón creamos un objeto con los datos del formulario (se obtienen a través de la propiedad value) y los enviamos al archivo procesar.php usando fetch.

Se supone que PHP nos debe devolver un JSON, por eso en la línea 25 decodificamos el JSON y finalmente colocamos la respuesta en el div.

Procesar formulario con PHP

En el servidor decodificamos lo que haya en el cuerpo de la petición, recuerda que usamos json_decode porque nos enviaron un JSON desde JavaScript.

Cuando hemos decodificado con JSON podemos acceder a las propiedades del objeto usando el operador ->; en este caso los datos se guardan en un archivo de texto pero bien podrían ser guardados en una base de datos.

<?php
$datos = json_decode(file_get_contents("php://input"));
// Aquí podemos procesar los datos
$nombre = $datos->nombre;
$correo = $datos->correo;
$edad = $datos->edad;
file_put_contents("datos.txt", "Nombre: $nombre, Correo: $correo, Edad: $edad\n", FILE_APPEND);
echo json_encode("Formulario enviado");

Finalmente hacemos un echo de una cadena, codificándola como JSON.

Probando formulario AJAX

El funcionamiento es sencillo. En el click del botón se obtienen los valores, los mismos se envían usando AJAX. Después PHP los recibe y procesa, para finalmente mostrar la respuesta que es devuelta a JavaScript para mostrarla en el div.

De manera adicional deberíamos limpiar los input o validarlos, ya sea del lado del cliente o del servidor, pero evité eso para hacer este ejemplo lo más simple posible.

Bonus: formulario con Bootstrap y AJAX

Si agregamos un poco de clases de Bootstrap al formulario presentado anteriormente queda un diseño aceptable. Solo se cambia la vista, así que el HTML queda así:

<!doctype html>
<html lang="es">
    <!--
Envío de formulario usando AJAX y PHP

https://parzibyte.me/blog
-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,
            shrink-to-fit=no">
        <meta name="description" content="Formulario de login con Bootstrap">
        <meta name="author" content="Parzibyte">
        <title>Enviar formulario AJAX con PHP</title>
        <!-- Cargar el CSS de Boostrap-->
        <link
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous">
    </head>

    <body>
        <main role="main" class="container my-auto">
            <div class="row">
                <div class="col-lg-4 col-12">
                    <h2 class="text-center">Enviar formulario</h2>
                    <a href="//parzibyte.me/blog">By Parzibyte</a>
                    <form>
                        <div class="form-group">
                            <label for="nombre">Nombre</label>
                            <input id="nombre" name="nombre"
                                class="form-control" type="text"
                                placeholder="Nombre">
                        </div>
                        <div class="form-group">
                            <label for="correo">Correo</label>
                            <input id="correo" name="correo"
                                class="form-control" type="email"
                                placeholder="Correo electrónico">
                        </div>

                        <div class="form-group">
                            <label for="edad">Edad</label>
                            <input id="edad" name="edad"
                                class="form-control" type="number"
                                placeholder="Edad">
                        </div>
                        <div id="respuesta" class="alert alert-success">

                        </div>
                        <button id="btnEnviar" type="button" class="btn btn-primary mb-2">
                            Enviar
                        </button>
                    </form>
                </div>
            </div>
        </main>
        <script src="./script.js"></script>
    </body>

</html>

Cargamos el estilo de Bootstrap, y dejamos los ids intactos. Ahora se ve así:

Conclusión

Solo recuerda que ya no se necesita poner cada dato dentro de un formulario, pues en realidad enviamos un objeto JSON; esto da la ventaja de que puedes reducir código y obtener datos de formularios separados.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/