Enviar formulario AJAX con JQuery

en JavascriptJqueryAjaxJquery ajax

Enviar datos de un formulario de forma asíncrona (AJAX) en Javascript utilizando el framework JQuery

Trabajar con JQuery para enviar formularios AJAX es muy sencillo. A continuación veremos cómo hacer un formulario usando Javascript y que los datos se envien de forma asíncrona para que sea transparente para el usuario.

El código HTML del formulario podría ser:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$('#boton_enviar').click(function(evt) {
  $.ajax({
    cache: false,
     async: false,
    type: 'POST',
    data: {
      parametro1: $('#id_del_campo1').val(),
      parametro2: $('#id_del_campo2').val()
    },
    url: '/direccion-url/',
     dataType: 'json',
    beforeSend: function(){
      $('#boton_enviar').attr('disabled', true);
    },
    success: function(response) {
      if(response.success == true){
              $('#respuesta').html(response.message);
       } else {
              $('#boton_enviar').attr('disabled', false);
      }
    },
    error: function(msg){
      $('#boton_enviar').attr('disabled', false);
    }
   });
  evt.preventDefault();
});

La mayoría de atributos se explican por si solos pero vale la pena destacar alguno. Uno de los más importantes es el campo url que es la dirección que procesará los datos del formulario que se envien.

Otro es el atributo success que tratará la respuesta que recibiremos del servidor.

Esta respuesta que será el procesador del formulario y que se puede programar en cualquier lenguaje (PHP, Java, Ruby, etc), deberá tratar los parámetros, y devolver una estructura JSON de respuesta del tipo:

{"success":true, "message":"Enviado correctamente"}

Si el resultado ha sido satisfactorio o bien

{"success":false, "message":"Error en el formulario"}

Método preventDefault()

En el form del ejemplo anterior, en la declaración HTML no hemos puesto ningun atributo action, que sería la url donde se enviaría el formulario si no fuera un envío AJAX. Pero de todas formas, si pusieramos alguna no pasaría nada, pues utilizamos el método preventDefault de Jquery al final de la función AJAX para evitar que se siga el flujo habitual al presionar el botón de enviar el formulario.

Prohibida la reproducción total o parcial de este artículo sin el previo consentimiento de Webtutoriales.com

Comentarios