Wie kann ich mit jQuery doppelte Formularübermittlungen verhindern?

Verhindern doppelter Formularübermittlungen mit jQuery

In bestimmten Szenarien ist es unbedingt erforderlich, zu verhindern, dass Benutzer Formulare erneut senden, während der Server sie noch verarbeitet Erstvorlage. Dieser Artikel bietet eine Lösung für dieses Problem mithilfe von jQuery und verspricht, die Formularfunktionalität beizubehalten und gleichzeitig doppelte Übermittlungen effektiv zu verhindern.

jQuery-Code verursacht Probleme

Ihr ursprünglicher jQuery-Code deaktiviert alles Formularelemente, einschließlich der Schaltfläche „Senden“, was dazu führt, dass das Formular nicht gesendet wird. Es ist wichtig, nur die Schaltfläche „Senden“ zu deaktivieren, da möglicherweise mehrere Schaltflächen mit unterschiedlichen Funktionen vorhanden sind.

Überarbeitete Lösung

Eine überarbeitete Lösung nutzt Datenattribute in jQuery, um doppelte Übermittlungen zu verhindern Ändern der Absenden-Schaltflächen. Hier ist der verbesserte Code:

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;
};

Verwendung

Um diese Lösung zu implementieren, rufen Sie einfach die Funktion „preventDoubleSubmission“ für das Formularelement auf:

$('form').preventDoubleSubmission();

Umgang mit AJAX-Formularen

Wenn bestimmte Formulare mehrere Übermittlungen innerhalb eines Seitenladevorgangs zulassen sollen, können Sie diese mithilfe einer Klasse ausschließen:

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

Durch die Einbindung dieser verbesserten Lösung , können Sie doppelte Formularübermittlungen in Ihren Webanwendungen wirksam verhindern, um ein nahtloses Benutzererlebnis zu gewährleisten und potenzielle Dateninkonsistenzen zu vermeiden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery doppelte Formularübermittlungen verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!