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

Name: 3 soluciones eficaces para recoger datos de un formulario y enviarlo por Ajax
Brand: Jose Aguilar
SKU: joseaguilarblog-7663
Availability: InStock
Rating: 5 (5 reviews)

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:

Source code    
$('#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:

Source code

<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í:

Source code

$('#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:

Source code

<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í:

Source code

$('#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.

Source code

<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!

(5 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

2 respuestas a “3 soluciones eficaces para recoger datos de un formulario y enviarlo por Ajax”

Guillermo Cotes dice:

20/07/2023 a las 18:10

Buen dia tengan.
Tengo una pagina asp donde ingreso el usuario , password y base de datos. Paso mediante post esos valores y los recibo mediante Reques.form(variable)
y quiero que al recibir el usuario, password y base de datos asignarselos a tres input respectivos

document.getElementById(‘strUsu’).value = strUsu;
document.getElementById(‘strPass’).value = strPass;
document.getElementById(‘strBase’).value = strBase;

pero no se asignan. lo quiero hacer mediante javascript o html o asp. no con PHP.
Ayuda por favor

Responder
- Jose Aguilar dice:
  
  13/09/2023 a las 8:52
  
  Hola, lo que tienes con JavaScript parece correcto. Debería ver el código completo por si se escapa algo, poder guiarte. Si tienes una url donde ver tu código, le podríamos dar un vistazo.
  
  Responder