3 soluciones eficaces para recoger datos de un formulario y enviarlo por Ajax

En este artículo vengo a darte a conocer 3 formas diferentes y eficaces para recoger datos de un formulario usando jQuery con el objetivo de enviar la información vía Ajax al servidor.

Vienen siendo soluciones que he podido encontrar y aplicar en mis proyectos durante los más de 15 años de mi carrera como programador freelance.

DataString

En la mayoría de entradas o tutoriales que hay en este blog que te ilustran sobre Ajax siempre he estado recogiendo la información de los formularios con un string data de la forma siguiente:

$('#dataStringExample button').on('click', function() {
        var email = $('#dataStringExample input[name="email"]').val();
        var password = $('#dataStringExample input[name="password"]').val();
        var dataString = 'email='+email+'&password='+password;
 
        alert('Enviando datos con dataString!\r\rInformación antes de enviar a Ajax:\r\r' + dataString);
 
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: dataString,
            dataType: 'json',
            success: function(response) {
                var message = `
                    La información ha sido recibida en el servidor!\r\r
                    Email: ${response.email}\r
                    Contrseña: ${response.password}\r\r
                    Token: ${response.password_md5}\r\r
                    Gracias!
                `;
                alert(message);
            }
        });
    });

Este código está muy bien y funciona.

Al hacer clic en un botón, recupero la información de 2 variables con nombre «username» y «password» y luego armo un dataString para asignarlo al data de la llamada Ajax.

En este punto, imagínate un sistema que permita al usuario iniciar sesión en un sitio web o algo similar.

En la llamada Ajax se ejecutaría el fichero process.php que haría la acción de verificar que los datos de usuario existen y proceder así a la entrada al sistema.

En el HTML de tu formulario no hace falta usar las etiquetas <form>. Puedes crear los campos directamente tal como sigue:

<div class="card" id="dataStringExample">
    <div class="card-header">
        DataString
    </div>
    <div class="card-body">
        <div class="input-group mb-3">
            <input type="email" class="form-control" name="email" placeholder="Email" required>
            <div class="input-group-append">
                <div class="input-group-text">
                    <span class="fa fa-envelope"></span>
                </div>
            </div>
        </div>
        <div class="input-group mb-3">
            <input type="password" class="form-control" name="password" placeholder="Contraseña" required>
            <div class="input-group-append">
                <div class="input-group-text">
                    <span class="fa fa-lock"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <button type="button" class="btn btn-primary btn-block submitLogin">Entrar</button>
    </div>
</div>

Ten en cuenta que estoy usando las clases de Bootstrap para el diseño o aspecto del formulario.

Objeto FormData

Los objetos FormData te permiten compilar un conjunto de pares clave/valor para enviar al servidor mediante Ajax, XMLHttpRequest o fetch.

Estos datos están destinados principalmente para el envío de datos de un formulario pero se pueden utilizar de forma independiente con el objetivo de transmitir los datos tecleados.

Se puede emplear como una simulación o reemplazo de la función submit() de un formulario.

De forma dinámica, puedes incrementar la información del formulario evitando así los campos de tipo oculto.

Basándonos en el ejemplo, el objeto FormData lo suelo usar así:

$('#formDataExample button').on('click', function() {
        var email = $('#formDataExample input[name="email"]').val();
        var password = $('#formDataExample input[name="password"]').val();
 
        var params = new FormData();
        params.append('email', email);
        params.append('password', password);
 
        alert('Enviando datos con el objeto FormData!\r\rInformación antes de enviar a Ajax:\r\rEmail:' + email + '\rContraseña: ' + password);
 
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: params,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(response) {
                var message = `
                    La información ha sido recibida en el servidor!\r\r
                    Email: ${response.email}\r
                    Contrseña: ${response.password}\r\r
                    Token: ${response.password_md5}\r\r
                    Gracias!
                `;
                alert(message);
            }
        });
    });

Es la misma idea pero, en este caso, estoy agregando las variables del formulario en el objeto FormData para asignarlo al data que deseo enviar al servidor mediante la técnica Ajax.

En el HTML de tu formulario no hace falta usar las etiquetas <form>. Puedes crear los campos directamente y funcionaría igual.

En este caso, el código de marcado o HTML será muy similiar o idéntico al anterior:

<div class="card" id="formDataExample">
    <div class="card-header">
        FormData Object
    </div>
    <div class="card-body">
        <div class="input-group mb-3">
            <input type="email" class="form-control" name="email" placeholder="Email" required>
            <div class="input-group-append">
                <div class="input-group-text">
                    <span class="fa fa-envelope"></span>
                </div>
            </div>
        </div>
        <div class="input-group mb-3">
            <input type="password" class="form-control" name="password" placeholder="Contraseña" required>
            <div class="input-group-append">
                <div class="input-group-text">
                    <span class="fa fa-lock"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <button type="button" class="btn btn-primary btn-block submitLogin">Entrar</button>
    </div>
</div>

Serialize()

jQuery tiene una función llamada serialize() que te puede ahorrar mucho trabajo.

Esta función permite transformar la información que viene del formulario en una cadena de texto apta para construir un dataString que puede recibir un archivo PHP cuando se ejecuta una llamada Ajax.

En formularios largos esta función puede ahorrarte mucho trabajo.

En este caso, se puede usar así:

$('#serializeExample button').on('click', function() {
        alert('Enviando datos con la función serialize!\r\rInformación antes de enviar a Ajax:\r\r' + $('#serializeExample form').serialize());
 
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: $('#serializeExample form').serialize(),
            dataType: 'json',
            success: function(response) {
                var message = `
                    La información ha sido recibida en el servidor!\r\r
                    Email: ${response.email}\r
                    Contrseña: ${response.password}\r\r
                    Token: ${response.password_md5}\r\r
                    Gracias!
                `;
                alert(message);
            }
        });
    });

En el HTML de tu formulario se requiere usar las etiquetas <form> para poder serializar los campos del formulario.

En este caso, el código de marcado es algo diferente.

Bueno, la única diferencia es que se debe incluir las etiquetas de formulario.

<div class="card" id="serializeExample">
    <form method="post">
        <div class="card-header">
            Serialize
        </div>
        <div class="card-body">
            <div class="input-group mb-3">
                <input type="email" class="form-control" name="email" placeholder="Email" required>
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fa fa-envelope"></span>
                    </div>
                </div>
            </div>
            <div class="input-group mb-3">
                <input type="password" class="form-control" name="password" placeholder="Contraseña" required>
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="fa fa-lock"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer">
            <button type="button" class="btn btn-primary btn-block submitLogin">Entrar</button>
        </div>
    </form>
</div>

Ver demo Descargar

 

Conclusiones

Dependiendo del formulario que estés llevando a cabo, una opción puede ser mejor que la otra en función de tus objetivos.

Si necesitas hacer algo rápido, me decantaría por serializar los formularios.

La opción DataString es la que he venido usando desde mis inicios en la programación con jQuery y Ajax.

A día de hoy, diría que la función serialize() vino hace varios años a reemplazarla.

Pero, si quieres tener bien controlado los parámetros que deseas trasladar al servidor, diría que DataString es mejor opción.

Sin embargo, si quieres emplear las técnicas de JavaScript moderno donde la etiqueta <form> está en desuso, te recomendaría que empezaras a trabajar con el objeto Formdata.

¿Qué forma crees que es mejor para recoger los datos de tus formularios?

¿Conoces alguna forma más?

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(3 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre