miércoles, mayo 21, 2014

Manejar el envio de un form con JQuery y AJAX

Tenemos un form cuyo envío queremos manejar via AJAX usando JQuery.  Para esto, programamos el evento "onSubmit" el form para invocar una función javascript, la cual usa $.ajax() para enviar el POST hacia un servicio REST.

Todo funciona bien... excepto que la primera vez que pulsamos el botón "Submit" la llamada Ajax falla, pero si volvemos a intentar funciona perfectamente.

El problema lo causa el hecho de que cuando se inicia el proceso de POST del formulario, se invoca la función javascript indicada en el evento onSubmit, pero luego se continua con el procesamiento normal del form, que incluye un POST hacia la dirección indicada en el href del elemento FORM y un postback de la página.  Para evitar esto, debemos incluir la siguiente linea al final de la función javascript:

event.preventDefault();



No hay comentarios: