So verwenden Sie AJAX, um asynchron Avatare von Kommentarbenutzern in WordPress_javascript-Kenntnissen zu erhalten

Nachdem der Kommentator seine E-Mail-Adresse eingegeben hat, wird der Avatar des Kommentators asynchron abgerufen und angezeigt. Ich persönlich bin der Meinung, dass diese Funktion zwar keine große Verbesserung der Benutzererfahrung bringen kann und keine praktische Funktion ist, aber zumindest sehr Cool. Einige Websites haben diese Funktion hinzugefügt, also habe ich auch ein Skript geschrieben, weil ich keine Zeit hatte, es zu kapseln, also bin ich direkt zum Prinzip und zum Code gegangen.

Prinzip des asynchronen dynamischen Avatar-Aufrufs

• Benutzereingaben einholen
• Benutzereingaben filtern
• Variablen an den Hintergrund übergeben
• Daten im Hintergrund verarbeiten und den HTML-Code des Avatars zurückgeben
• Rufen Sie die Hintergrundrückgabedaten ab und laden Sie den HTML-Code auf die aktuelle Seite

Es scheinen viele Schritte zu sein, aber es ist eigentlich sehr einfach. Wir müssen unser Thema nur geringfügig ändern, um den Effekt zu erzielen.

Einfacher Funktions-Screenshot:

Leistung

Funktionscode: JavaScript
Der folgende Code muss in das JQuery-Framework integriert werden.
Die Variable apiurl ist die Dateiadresse Ihrer PHP-API-Schnittstelle, die sich unterhalb des Dateicodes befindet.
Die Funktion konzentriert sich hauptsächlich auf die Aktion, den Fokus des E-Mail-Eingabefelds zu verlieren.

 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('请输入正确邮箱地址');
 }
 })

Funktionscode: PHP
Hintergrundantwortcode, hier verwende ich eine separate Auslagerungsdatei, um zu antworten,
Dies hat den Vorteil, dass Sie diesen Teil des Codes nicht jedes Mal aufrufen müssen, wenn Sie die Seite öffnen,
Wenn Sie nur dann antworten, wenn eine Anfrage gestellt wird, werden die Bedenken hinsichtlich der Abwärtskompatibilität des Themas vollständig beseitigt.
Natürlich können Sie die Antwortfunktion auch an den wp-Hook anhängen.

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

Zusammenfassung
Also……. Ganz einfach, oder?
Anfrage-> Antwort-> Insgesamt drei Schritte.
Um die Logik zu verbessern und die Organisation hervorzuheben, werden hier natürlich einige notwendige Daten gefiltert
Es gibt auch einige Fehleinschätzungen, überlassen wir diese einfach dem Nachdenken.