jquery ajax formulario presenta dos veces

Tengo un formulario que estoy capturando a través de jquery y envío a través de ajax. Mi problema es que el formulario se envía más de una vez cada vez que actualizo la página.

Intenté desvincular el botón Enviar, pero luego el formulario se publica normalmente después del primer envío. Cualquier ayuda sería apreciada

$('#exportForm').submit(function() { $.ajax({ type: "POST", url: $(this).attr('action'), data: $(this).serialize(), success: function(response) { $('#exportForm').unbind('submit'); console.log(response); } }); return false; }); 

Lo más probable es que estés usando un button o lo submit para activar el evento ajax. Prueba esto:

 $('#exportForm').submit(function(e){ e.preventDefault(); $.ajax({ type: "POST", url: $(this).attr( 'action' ), data: $(this).serialize(), success: function( response ) { console.log( response ); } }); return false; }); 

Además de invocar preventDefault, también llame a stopImmediatePropagation en el evento.

 $('#exportForm').submit(function(e){ e.preventDefault(); e.stopImmediatePropagation(); $.ajax({ type: "POST", url: $(this).attr( 'action' ), data: $(this).serialize(), success: function( response ) { console.log( response ); } }); return false; }); 

En caso de que esté utilizando algún tipo de validación (p. Ej. JQuery Validation), el formulario se envía dos veces porque, aparte de $('#exportForm').submit usted mismo la escritura, el complemento de validación también enviará el formulario una vez que haya validado todo el campo .

NB: si está utilizando jQuery Validation, evite usar .submit() . En su lugar, use submitHandler .

Simplemente puede usar e.stopImmediatePropagation(); :

Por ejemplo :

 $('#exportForm').submit(function(e){ e.stopImmediatePropagation(); 

El problema se puede resolver usando un div en lugar de un botón en su formulario php. No se necesita un botón debido al uso de ajax.

Como señaló Chris Sercombe, e.stopImmediatePropagation () funciona y definitivamente soluciona el problema, pero no debería tener que usarlo. El problema todavía existe en tu código en alguna parte. Permítanme mencionar un ejemplo de cómo se pueden enviar dos solicitudes de envío:

Si está utilizando AngularJS, y digamos que crea un controlador llamado “HandleAjaxController”, podría asignar este ng-controller a un div, y luego asignar accidentalmente este mismo ng-controller a un div interno. Esto provocaría que la solicitud posterior se envíe dos veces. Asi que:

  

Esto me causó mucho estrés una vez porque en mi ng-route había configurado el controlador aquí:

  $routeProvider .when("/", { templateUrl : "src/js/partials/home.html", controller : "HandleAjaxController" }) 

y luego lo configuro nuevamente en mi home.html:

De todos modos, ese es un ejemplo de cómo se pueden enviar dos publicaciones.

He agregado jquery.unobtrusive-ajax.min.js ref dos veces como se responde aquí https://stackoverflow.com/a/15041642/4412545

Debería verificar su otro código js, ​​quizás en algún lugar active el evento “enviar” dos veces. Esto sucedió en mi caso, olvidé “return false” en el controlador onclick por un botón