Une brève analyse sur la façon d'utiliser habilement beforeSend d'Ajax pour améliorer l'expérience utilisateur

Ci-dessous, je vais vous présenter une brève analyse de la façon d'utiliser beforeSend d'Ajax pour améliorer l'expérience utilisateur. Maintenant, partagez-le avec tout le monde et donnez-lui une référence

jQuery est un framework js open source qui est souvent utilisé. Il existe une méthode beforeSend dans la requête $.ajax, qui est utilisée pour effectuer certaines actions avant d'envoyer le. demande au 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 d'un projet réel, lors de la soumission d'un formulaire, cela est souvent dû au réseau ou autre La raison en est que lorsque les utilisateurs cliquent sur le bouton de soumission, ils croient à tort que leur opération n'a pas réussi, puis ils répéteront les heures d'opération du bouton de soumission si le code frontal de la page ne correspond pas. Lors du traitement, plusieurs éléments des mêmes données seront généralement insérés dans la base de données, ce qui entraînera 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, puis 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

chargement du serveur de requêtes ajax Quand les données sont répertoriées, elles invitent au chargement ("Chargement, veuillez patienter...")

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

Ce qui précède est ce que j'ai compilé pour tout le monde. j'espère que cela sera utile à l'avenir.

Articles connexes :

Solution rapide à la soumission Ajax de caractères tronqués sous IE

Ajax récupère les données et les affiche sur la page Méthode de mise en œuvre

Exemple de code de fichier de téléchargement asynchrone du formulaire 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!