Wie verhindert man die doppelte Formularübermittlung in jQuery?

Verhindern der erneuten Übermittlung von Formularen in jQuery

Bei der Übermittlung von Formularen ist es wichtig zu verhindern, dass Benutzer während einer Serververarbeitungsverzögerung versehentlich zweimal übermitteln. Eine gängige Lösung besteht darin, Formularelemente beim Absenden zu deaktivieren. Dieser Ansatz kann jedoch dazu führen, dass Elemente deaktiviert werden, die nicht vorhanden sein sollten, beispielsweise Eingaben, die wichtige Daten enthalten.

Nur ​​Senden-Schaltflächen deaktivieren

Um die Senden-Schaltflächen gezielt zu deaktivieren und Störungen zu vermeiden Verwenden Sie bei der Formularübermittlung den folgenden Code:

$('button[type=submit], input[type=submit]').prop('disabled',true);

jQuery-Plugin für doppelte Übermittlung Prävention

Eine weitere effektive Lösung besteht darin, ein jQuery-Plugin zu erstellen, das die data()-Funktion nutzt, um Formulare als bereits übermittelt zu markieren:

jQuery.fn.preventDoubleSubmission = function() {
    $(this).on('submit',function(e){
        var $form = $(this);

        if ($form.data('submitted') === true) {
            // Previously submitted - don't submit again
            e.preventDefault();
        } else {
            // Mark it so that the next submit can be ignored
            $form.data('submitted', true);
        }
    });

    // Keep chainability
    return this;
};

Um das Plugin zu verwenden, wenden Sie es einfach an zu Ihrem Formular:

$('form').preventDoubleSubmission();

Ausgenommen Ajax-Formulare

Wenn ja AJAX-Formulare, die mehrere Übermittlungen erfordern, schließen Sie aus, indem Sie eine Klasse hinzufügen und den folgenden Selektor verwenden:

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

Durch die Verwendung dieser Techniken können Sie doppelte Formularübermittlungen verhindern und eine reibungslose Serververarbeitung gewährleisten.

Das obige ist der detaillierte Inhalt vonWie verhindert man die doppelte Formularübermittlung in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!