Eine kurze Analyse, wie Sie beforeSend von Ajax geschickt einsetzen können, um die Benutzererfahrung zu verbessern

Im Folgenden werde ich Ihnen kurz analysieren, wie Sie beforeSend von Ajax verwenden können, um die Benutzererfahrung zu verbessern. Teilen Sie es jetzt mit allen und geben Sie einen Verweis darauf.

jQuery ist ein häufig verwendetes Open-Source-JS-Framework. In der $.ajax-Anfrage gibt es eine beforeSend-Methode, mit der vor dem Senden einige Aktionen ausgeführt werden Anfrage an den Server.

$.ajax({
   beforeSend:function(){
   // handle the beforeSend event   
   },
   complete:function(){
// handle the complete event  
   }
});

Duplikate von Daten verhindern

In der tatsächlichen Projektentwicklung liegt es beim Absenden eines Formulars oft am Netzwerk oder aus anderen Gründen. Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, denkt er fälschlicherweise, dass der Vorgang nicht erfolgreich ist, und wiederholt dann die Betätigung der Schaltfläche „Senden“. Wenn der Front-End-Code der Seite keine entsprechende Verarbeitung durchführt, wird dies normalerweise der Fall sein Dies führt dazu, dass mehrere Teile derselben Daten in die Datenbank eingefügt werden, was zu einem Anstieg schmutziger Daten führt. Um dieses Phänomen zu vermeiden, deaktivieren Sie die Schaltfläche „Senden“ in der beforeSend-Methode der $.ajax-Anfrage, warten Sie, bis die Ajax-Anfrage abgeschlossen ist, und stellen Sie dann den Verfügbarkeitsstatus der Schaltfläche wieder her.

Zum Beispiel:

$.ajax({
type:"post",
data:studentInfo,
contentType:"application/json",
url:"/Home/Submit",
beforeSend:function(){
   //禁用按钮防止重复提交
   $("#submit).attr({disabled:"disabled"});
},
success:function(data){
   if(data=="Success"){
     // 清空输入框
     clearBox();
   }
},
complete:function(){
   $("#submit").removeAttr("disabled");
},
error:function(data){
   consloe.info("error:"+data.responseText);
}
});

Toast-Effekt simulieren

Ajax-Anfrageserver zum Laden der Datenliste Wenn Sie zum Laden aufgefordert werden („Laden, bitte warten ...“)

$.ajax({
type:"post",
contentType:"application/json",
url:"/Home/GetList",
beforeSend: function(){
   $("loading").show();
},
success: function(data){
   if (data=="Success"){
     // ...
   }
},
error: function(){
   console.info("error:"+data.responseText);
}
});

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es für alle hilfreich ist in der Zukunft.

Verwandte Artikel:

Schnelle Lösung für die Ajax-Übermittlung verstümmelter Zeichen unter IE

Ajax ruft die Daten ab und zeigt sie dann an es auf der Seite Implementierungsmethode

Ajax-Formular asynchroner Upload-Datei-Beispielcode

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie Sie beforeSend von Ajax geschickt einsetzen können, um die Benutzererfahrung zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!