jQuery

Enviar formulario a PHP con jQuery y AJAX

Acabamos de ver cómo hacer una petición HTTP GET usando AJAX, jQuery y PHP. Ahora veremos cómo enviar un formulario con jQuery usando AJAX, procesarlo con PHP y recibir la respuesta de nuevo del lado del cliente.

Para lograr esto, usaremos el método $.post y la librería de jQuery.

Nota: recuerda que puedes hacer esto sin jQuery.

Primero: el formulario

El archivo que tiene la vista es el siguiente, y está basado en una plantilla de Bootstrap 4.

<!doctype html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,
            shrink-to-fit=no">
        <meta name="description" content="Envío de formulario a PHP usando AJAX
            y jQuery">
        <meta name="author" content="Parzibyte">
        <title>Envío de formulario a PHP usando AJAX y jQuery</title>
        <!-- Cargar el CSS de Boostrap-->
        <link href="bootstrap.min.css" rel="stylesheet">

    </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="jquery-3.4.1.min.js"></script>
        <script src="./script.js"></script>
    </body>

</html>

Dentro del archivo, además de definir el formulario que será enviado por AJAX, cargamos la librería de jQuery y un script.

Fíjate en que cada input tiene un id, y que también tenemos un div con el id respuesta.

El script que envía el formulario con jQuery

Ahora veamos el script. En la parte superior he definido las variables del DOM, es decir, el div y los input; todo es obtenido a través de su id.

Esperamos a que el documento esté listo, recuperamos los datos de cada input (con val()) y creamos un objeto que enviamos al archivo procesar.php usando el método $.post.

$(document).ready(function() {
    const $nombre = $("#nombre"),
        $correo = $("#correo"),
        $edad = $("#edad"),
        $btnEnviar = $("#btnEnviar"),
        $respuesta = $("#respuesta");

    $btnEnviar.click(function() {
        // Poner estado de "cargando"
        $respuesta.html("Cargando...");
        $.post("./procesar.php", {
            nombre: $nombre.val(),
            correo: $correo.val(),
            edad: $edad.val(),
        }, function(respuestaComoJson) {
            // La decodificamos
            let respuesta = JSON.parse(respuestaComoJson);
            $respuesta.html(respuesta);
        })
    });

});

Presta atención a la línea 10, en ella, colocamos un “cargando” en la respuesta, para dar una retroalimentación al usuario. Este texto cambiará en la línea 18, pero como no sabemos en qué momento se resolverá la función, dejamos un “cargando” y lo cambiamos cuando la misma termina.

Dentro de la función simplemente decodificamos la respuesta como JSON, y la colocamos dentro del div contenedor.

El servidor con PHP

Ahora veamos el servidor de PHP.

Vamos a recibir los datos en $_POST usando la clave que usamos al enviarlos en el objeto. Con estos datos ya podemos trabajar; en este caso simplemente los pondré dentro de un archivo de texto usando file_put_contents pero bien podrían ser guardados en una base de datos.

Al terminar imprimo un mensaje codificado como JSON, que se pondrá en el div de retroalimentación en el formulario.

<?php
// Aquí podemos procesar los datos. Vienen dentro de $_POST
$nombre = $_POST["nombre"];
$correo = $_POST["correo"];
$edad = $_POST["edad"];
file_put_contents("datos.txt", "Nombre: $nombre, Correo: $correo, Edad: $edad\n", FILE_APPEND);
echo json_encode("Formulario enviado");

Poniendo todo junto

Así que al final queda así:

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/