Ajax und Verhindern Doppel "Senden"

Ich habe es mit einer Legacy-Anwendung, wo sie [a] -Tags für viele Ajax-Form "Submits" verwenden. Wenn wir die [input] -Tasten benutzen würden, könnten wir einfach das disable-Attribut des [input] -Tags setzen. Aber auf Hyperlinks ist deaktivieren nicht Teil der Spezifikation und ist nicht konsistent über den Browser.Ajax und Verhindern Doppel "Senden"

Wir suchen nach einer einfachen Lösung zum Blockieren der zusätzlichen Klicks auf einen Hyperlink.

Hinweis: Wir verwenden JavaScript mit jQuery

Quelle

2010-07-06 BuddyJoe

Dies funktionierte für mich.http: //stackoverflow.com/questions/16777003/what-is-the-easiest-way-to-disable- enable-buttons-and-links-jquery-bootstrap – radztech

radztech, coole Methode dafür. danke für die heads up – BuddyJoe

Womps Lösung ist eine sehr sehr gründliche Möglichkeit, dies zu tun. Wenn Sie etwas einfacher möchten, würde ich wahrscheinlich eine semaphore implementieren. Setzen Sie einfach ein "sending" -Flag und testen Sie, ob der Semaphor gesetzt ist, wenn der Benutzer auf den Link klickt. Sie können dies tun, indem Sie das Flag für das DOM-Objekt selbst setzen oder einen globalen booleschen Wert verwenden.

Ich habe offensichtlich den $ .ajax Anruf gekürzt, aber ich denke, Sie bekommen den Punkt.

Bearbeiten: Er ... tatsächlich, vergaß den wichtigsten Teil. Das if (! Einreichen).

Quelle

2010-07-06 17:09:33

Da Sie immer die 'self.submitting' Status in der Antwort setzen Sie den Rückruf Haken vereinfachen könnte: ' $ Schnipsel ({ \t vollständig: function() { \t \t self.submitting = false; \t} }); ' – matsev

Dies funktioniert nicht, wenn der zweite Klick zwischen den Zeilen erscheint 'if (! Thismitting)' und 'thismitting = true;'. Dies ist ein klassisches Beispiel dafür, wie man kein Semaphor implementiert ;-) – Steves

@steves das ist unter dem JS-Ausführungsmodell unmöglich. Hast du diesen Thread mit Java verwechselt? : P – Esailija

In Ihrem "Klick" Handler entweder return false oder Standard verhindern -

$('#target').click(function(e) { 
    e.preventDefault(); 
    alert('Handler for .click() called.'); 
}); 

$('#target').click(function(e) { 
    alert('Handler for .click() called.'); 
    return false; 
});

Hmm ... nur lassen Sie die Taste einmal gedrückt werden (während der gesamten Lebensdauer der Seite), dann vielleicht .data() verwenden -

http://api.jquery.com/data/

Oder ein Attribut wechseln.

Quelle

2010-07-06 16:51:34

Direkt am Geld. – Gavrisimo

Dies verhindert die Standardaktion für den Link, ja. Ich denke jedoch, dass Tyndall weitere AJAX-Aufrufe verhindern möchte. In diesem Fall glaube ich nicht, dass dies funktionieren wird. –

Ich mag Ben Nadel routine for handling this.

Im Wesentlichen erstellen Sie einen Wrapper um die jQuery .ajax-Funktion, und Sie können alle Arten von Dingen erstellen, die für jede Ajax-Anfrage in Ihrer Anwendung passieren. Eines dieser Dinge ist die Verfolgung von Anfragen.

Sie werden sehen, dass in seiner getJSON Wrappermethode ein optionaler "name" -Parameter für den Anforderungsnamen verwendet wird. Dies kann alles sein, es ist nur ein Schlüssel, um zu identifizieren, woher die Anfrage stammt. In Ihrem Fall würde es durch jeden Linkklick geliefert werden. Wenn der name-Parameter existiert, speichert er ihn in einer Tracking-Sammlung.

Wenn ein anderer Anruf mit demselben Anforderungsnamen eingeht, wird er einfach gelöscht. Sobald die ursprüngliche Anforderung zurückgegeben wird, löscht er das Verfolgungsflag für diesen Anforderungsnamen.

Diese Methode eignet sich hervorragend, um viele allgemeine Funktionen für alle ajax-Anforderungen in Ihrer Anwendung zu erweitern. Ich habe einen Multiple-Request-Handler erstellt, mit dem Sie auch das Verhalten neuer Anfragen festlegen können - ob bestehende abgebrochen oder einfach gelöscht werden sollen. Dies ist nützlich, wenn Sie möchten, dass die letzte Anfrage verarbeitet wird, wie bei Autokompletts.

Quelle

2010-07-06 16:58:02 womp

Sehr gründliche Lösung. +1 –

Was passiert, wenn diese Links eine Ajax-Anfrage stellen? Wenn ja, könnten Sie sich das

http://www.protofunc.com/scripts/jquery/ajaxManager3/ ansehen (nicht ihre Version 3.05 im Repository, die Sie vielleicht verwenden möchten).

Dies hat eine Option, um doppelte Ajax-Anfragen zu stoppen.

Auch kann man sich anschaut,

http://jquery.malsup.com/block/

Sie auf den Link klicken und ein Lade Zeichen aufkommt und sie können nicht klicken länger auf diesen Link.

Quelle

2010-07-06 19:52:38 chobo2

var fooObj = { 
    isAdd : true, 
    add : function(){ 
     if(fooObj.isAdd == true){ 
      fooObj.isAdd = false; 
      var opt = { 
       url : 'http://yoururl.com', 
       type : 'post', 
       success : function(response){ 
        if(response=='save'){ 
         fooObj.isAdd = true; 
        } 
       } 
      } 
      $.ajax(opt);  
     } 
    } 
}

Ich denke, das funktioniert. Ich bemerke auch IE Browser Antwort langsam bei der Verwendung von Ajax.

Quelle

2012-03-19 06:32:54 adietan63

Verwenden Sie die Ctrl + K-Option, um Ihren Code anstelle von HTML zu formatieren, es ist viel einfacher zu lesen (und für Sie zu formatieren). – DaveShaw

Für alle Ereignisse, die einen AJAX-Aufruf auslösen, ist es eine gute Übung, eine Ladeebene auf der übergeordneten Komponente oder auf der ganzen Seite bei der ersten Hand hinzuzufügen, um neue Ereignisauslöser zu verhindern und andererseits den Benutzer über das Laden zu informieren Daten sind in Bearbeitung. Sie können dies tun, indem Sie zum Beispiel jQuery BlockUI Plugin verwenden, die sehr einfach zu implementieren ist

Quelle

2016-09-09 08:20:24

Ajax und Verhindern Doppel "Senden"

Antwort

Verwandte Themen