Programando un solo ajax para cualquier form

Veremos como crear un script con ajax para reutilizar código.

Rodríguez Patiño, Eduardo
2020-12-01 | 13,192 lecturas

Es común enviar peticiones al servidor mediante AJAX, lo que se conoce como XHR y tambíen es común repetir el código para cada formulario, yo tengo una pequeña lógica hecha en jQuery la cual permite hacer un solo código AJAX para cualquier formulario.

De acuerdo para esto necesitamos el plugin de nuestro amigo Malsup que debemos agregarlo a nuestras etiquetas head: http://malsup.github.io/min/jquery.form.min.js

Tambien desarrolle un pequeño plugin para validar formularios el cual mediante uso de clases css hacemos la validacion, si queremos que sea requerido, numérico, una url valida de youtube entre otros ... si ustedes tienen su propio plugin cambien la lógica.

Ahora, disponemos del siguiente formulario:

<form action="" method="post" accept-charset="utf-8" class="upd">
    <div class="form-group">
        <label>Nombre</label>
        <input name="Nombre" value="" class="form-control required" placeholder="Ingrese su nombre" type="text">
    </div>
    <div class="form-group">
        <label>Correo</label>
        <input name="Correo" value="" class="form-control required email" placeholder="Ingrese su correo" type="text">
    </div>
    <div class="text-right">
        <button type="submit" class="btn btn-primary" data-ajax="true">
            Enviar
        </button>
    </div>
</form>

Que estamos haciendo, cuando se detecte un evento click en un boton, este tendra que tener seteado el atributo data-ajax=”true”, entonces nuestro código entra acción:

  • Busca la etiqueta form que lo contiene.
  • Guarda el boton clickeado en una variable. Guarda la URL a donde apunta el formulario en una variable.
  • ¿Si nuestro boton tuviera el atributo data-confirm?, hara una pregunta antes de procesar la solicitud.
  • ¿Si tuviera el atributo data-delete activo?, preguntara si realmente desea eliminar este registro.
  • Luego valida el formulario desde el lado del cliente, esta validación usen el plugin que crean más conveniente.
  • Luego cargará un div que tapara a todo el formulario con un background que contiene una imagen de “Cargando ..”, para esto el form debe estar en posición relativa.
  • Lo que viene es la configuración del jquery form, que se encarga de serializar todo los valores del formulario de un solo golpe y enviarlo a nuestro servidor, yo ya lo tengo configurado. Como respuesta esperamos un retorno JSON.
  • Luego que el servidor responde, quitamos el DIV que bloquea el formulario obteniendo un json el siguiente formato:

Vamos a explicar el json respondido el cual debemos crear un array u objeto con los siguienes atributos:

  • Response: true|false, si ocurrio un error en el servidor marcamos como false.
  • Message: si queremos retornar un mensaje a nuestro cliente.
  • Href: si queremos redireccionar a alguna página.
  • Function: si queremos ejecutar alguna función después de la petición.

Esta es una lógica que ha respondido a prueba/error pero ya esta bastante estable, si te gusta compartelo.

Nota: el código esta optimizado para trabajar con bootstrap 3, más que nada el tema de la hoja de estilo. Ejem: el mensaje que dice “Todo salio magnífico esta maquetado con el alert de bootstrap 3?.