jQuery AJAX-Formular wird zweimal gesendet

Ich habe ein Formular, das ich über jQuery erfasse und über AJAX sende. Mein Problem ist, dass das Formular jedes Mal, wenn ich die Seite aktualisiere, mehr als einmal gesendet wird.

Ich habe versucht, die Submit-Schaltfläche zu entbinden, aber dann wird das Formular nach dem ersten Absenden normal gepostet. Jede Hilfe wäre willkommen

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

Sowie anrufen preventDefaultauch anrufen stopImmediatePropagation auf der Veranstaltung.

$('#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;
});

Es ist sehr wahrscheinlich, dass Sie eine verwenden button oder submit um das Ajax-Ereignis auszulösen. Versuche dies:

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

        return false;
    });

Falls Sie irgendeine Art von Validierung verwenden (z. B. jQuery-Validierung), wird das Formular zweimal gesendet, da abgesehen von $('#exportForm').submit Sie schreiben selbst, das Validierungs-Plugin sendet das Formular auch, nachdem es alle Felder erfolgreich validiert hat.

NB: Wenn Sie die jQuery-Validierung verwenden, vermeiden Sie die Verwendung von .submit(). Verwenden Sie stattdessen submitHandler.

Sie können einfach verwenden e.stopImmediatePropagation(); :

Beispielsweise :

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

Wie Chris Sercombe betonte, funktioniert e.stopImmediatePropagation() und behebt das Problem definitiv, aber Sie sollten es nicht verwenden müssen. Das Problem besteht immer noch irgendwo in Ihrem Code. Lassen Sie mich ein Beispiel nennen, wie zwei Post-Anforderungen gesendet werden könnten:

Wenn Sie AngularJS verwenden und beispielsweise einen Controller namens “HandleAjaxController” erstellen, können Sie diesen ng-Controller einem div zuweisen und dann versehentlich denselben ng-Controller einem inneren div zuweisen. Dies würde dazu führen, dass die Post-Anforderung zweimal gesendet wird. So:

    <div ng-controller="HandleAjaxController">
        <div ng-controller="HandleAjaxController">
            <button id="home" type="button" class="btn btn-success">Send data</button>

Das hat mir mal sehr viel Stress bereitet, weil ich in meiner ng-Route den Controller hier reingesetzt hatte:

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

und dann setze ich es wieder in meiner home.html: <div ng-controller="HandleAjaxController">

Wie auch immer, das ist ein Beispiel dafür, wie zwei Posts gesendet werden könnten.

Sie sollten Ihren anderen js-Code überprüfen, vielleicht löst er irgendwo zweimal das “Submit” -Ereignis aus. Dies ist in meinem Fall passiert, ich habe “return false” im Onclick-Handler für eine Schaltfläche vergessen

Ich habe jquery.unobtrusive-ajax.min.js ref zweimal hinzugefügt, wie hier beantwortet https://stackoverflow.com/a/15041642/4412545