So verbessern Sie die Benutzererfahrung mit beforeSend

Dieses Mal zeige ich Ihnen, wie beforeSend die Benutzererfahrung verbessert. Welche Vorsichtsmaßnahmen es gibt, um die Benutzererfahrung zu verbessern? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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

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

Duplikate von Daten verhindern

In der tatsächlichen Projektentwicklung klicken Benutzer beim Absenden eines Formulars häufig auf die Schaltfläche „Senden“ aufgrund von Netzwerk- oder Aus anderen Gründen wird fälschlicherweise angenommen, dass der Vorgang nicht erfolgreich ist. Wenn der Front-End-Code der Seite keine entsprechende Verarbeitung durchführt, führt dies normalerweise dazu, dass mehrere Teile derselben Daten vorhanden sind in die Datenbibliothek eingefügt, was zu einer Zunahme schmutziger Daten führt. Um dieses Phänomen zu vermeiden, deaktivieren Sie die Schaltfläche „Senden“ in der beforeSend-Methode in 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

Wenn Ajax den Server auffordert, die Datenliste zu laden, fordert es Loading("Loading , bitte warten" Nach ...)

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum PHP-Chinesen Webseite!

$.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);
}
});

Empfohlene Lektüre:

Der Hintergrund der jQuery+AJAX-Aufrufseite

Diskussion und Forschung zu Ajax

Das obige ist der detaillierte Inhalt vonSo verbessern Sie die Benutzererfahrung mit beforeSend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!