Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Programando un solo ajax para cualquier form
Actualizado el 02 Noviembre, 2014 y leído 8,384 veces
Calificación: Sin calificar 10

Programando un solo ajax para cualquier form

Anexsoft

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:

  1. Busca la etiqueta form que lo contiene.

  2. Guarda el boton clickeado en una variable.

  3. Guarda la URL a donde apunta el formulario en una variable.

  4. ¿Si nuestro boton tuviera el atributo data-confirm?, hara una pregunta antes de procesar la solicitud.

  5. ¿Si tuviera el atributo data-delete activo?, preguntara si realmente desea eliminar este registro.

  6. Luego valida el formulario desde el lado del cliente, esta validación usen el plugin que crean más conveniente.

  7. Luego cargara 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.

  8. 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.

  9. 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.

DEMO: anexsoft.com/tutoriales/ajax-reutilizable/

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″.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.