Comment améliorer l'expérience utilisateur avec beforeSend

Cette fois, je vais vous montrer comment beforeSend améliore l'expérience utilisateur. Quelles sont les précautions pour beforeSend pour améliorer l'expérience utilisateur. Ce qui suit est un cas pratique, jetons un coup d'œil.

jQuery est un framework js open source couramment utilisé Il existe une méthode beforeSend dans la requête $.ajax, qui est utilisée pour en exécuter avant d'envoyer la requête. à l'action du serveur.

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

Empêcher les données en double

Dans le développement réel d'un projet, lors de la soumission d'un formulaire, les utilisateurs cliquent souvent sur le bouton Soumettre en raison du réseau ou Pour d'autres raisons, croire à tort que l'opération échoue entraînera des opérations répétées sur le bouton de soumission. Si le code frontal de la page n'effectue pas le traitement correspondant, cela entraînera généralement l'apparition de plusieurs éléments des mêmes données. inséré dans la bibliothèque data, entraînant une augmentation des données sales. Pour éviter ce phénomène, désactivez le bouton de soumission dans la méthode beforeSend dans la requête $.ajax, attendez que la requête Ajax soit terminée et restaurez l'état disponible du bouton .

Par exemple :

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

Simuler l'effet Toast

Lorsque ajax demande au serveur de charger la liste de données, il demande le chargement ("Chargement , veuillez patienter. Après...")

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php chinois. site web!

Lecture recommandée :

L'arrière-plan de la page d'appel jQuery+AJAX

Discussion et recherche sur Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!