Comment utiliser AJAX pour obtenir de manière asynchrone les avatars des utilisateurs de commentaires dans les compétences WordPress_javascript

Une fois que le commentateur a saisi son adresse e-mail, l'avatar du commentateur est obtenu et affiché de manière asynchrone. Personnellement, j'estime que même si cette fonction ne peut pas apporter beaucoup d'amélioration à l'expérience utilisateur, et qu'elle n'est pas une fonction pratique, elle l'est au moins très. cool. Voir Certains sites Web ont ajouté cette fonction, donc j'ai aussi écrit un script parce que je ne voulais pas être seul, je n'avais pas le temps de l'encapsuler, donc je suis allé directement au principe et au code.

Principe de l'appel d'avatar dynamique asynchrone

• Obtenir les commentaires de l'utilisateur
• Filtrer les entrées de l'utilisateur
• Passer les variables en arrière-plan
• Traiter les données en arrière-plan et renvoyer le code HTML de l'avatar
• Récupérez les données de retour en arrière-plan et chargez le code HTML sur la page actuelle

Cela semble être beaucoup d'étapes, mais c'est en fait très simple. Il suffit de modifier légèrement notre thème pour obtenir l'effet.

Capture d'écran de la fonction simple :

Réussite

Code fonction : JavaScript
Le code suivant doit être intégré au framework JQuery.
La variable apiurl est l'adresse de votre fichier d'interface API php, qui se trouve sous le code du fichier.
La fonction se concentre principalement sur l'action de perdre le focus de la zone de saisie de l'e-mail.

 function getAvatar(authorEmail) {//获得头像代码封装函数
 var nowtime = Math.round(new Date().getTime() / 1000);
 $.get(apiurl, {
 action : "get_avatar",
 email : authorEmail,
 t : nowtime
 }, function(data) {
 $('#get-avatar-img').fadeOut('slow', function() {
 $('#get-avatar-img').html(data).fadeIn();
 })
 });
 }
 
 var avatarhtml = '<div id="get-avatar-img" style="display:none;">';
 avatarhtml += '</div>';
 $('#respond').append(avatarhtml);//添加头像HTML
 if($('#email').val().length > 1)
 getAvatar($('#email').val());//获得邮箱地址
 $('#email').focusout(function() {//email输入框失去焦点绑定的动作
 var authorEmail = $('#email').val();
 var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
 var flag = pattern.test(authorEmail);
 if(flag) {
 $('#get-avatar-img').html('载入头像中').fadeIn('fast');
 getAvatar(authorEmail);
 } else {
 alert('请输入正确邮箱地址');
 }
 })

Code fonction : PHP
Code de réponse en arrière-plan, ici j'utilise un fichier de page séparé pour répondre,
L’avantage est que vous n’êtes pas obligé d’appeler cette partie du code à chaque fois que vous ouvrez la page,
Répondre uniquement lorsqu'une demande est faite élimine complètement les problèmes de compatibilité ascendante du thème.
Bien sûr, vous pouvez également monter la fonction de réponse sur le hook wp.

 $action = isset($_REQUEST['action']) ? $_REQUEST['action'] : false ;
 
if($action){//留下以后添加功能的空间，你懂的。
 switch ($action) {
 case 'get_avatar':
 $email = isset($_REQUEST['email']) ? $_REQUEST['email']: false ;
 if($email){
 echo get_avatar($email,60);
 }
 break;
 
 default:
 echo "请求内容不充分";
 break;
 }
 }

Résumé
Alors……. Très simple, non ?
Demande-> Réponse-> Ajouter Un total de trois étapes.
Bien entendu, afin d'améliorer la logique et de mettre en valeur l'organisation, certaines données nécessaires sont filtrées ici
Il y a aussi quelques erreurs de jugement, laissons cela à la réflexion.