How to use AJAX to asynchronously obtain avatars of comment users in WordPress_javascript skills

After the commenter enters their email address, the commenter's avatar is asynchronously obtained and displayed. Personally, I feel that although this function cannot bring much improvement to the user experience, and it is not a practical function, it is at least very cool. See Some websites have added this function, so I also wrote a script because I didn't want to be lonely. I didn't have time to encapsulate it, so I went directly to the principle and code.

Principle of asynchronously dynamically calling avatars

• Get user input
• Filter user input
• Pass variables to the background
• Process data in the background and return the HTML code of the avatar
• Get the background return data and load the HTML code into the current page

It seems like a lot of steps, but it is actually very simple. We only need to slightly modify our theme to achieve the effect.

Simple function screenshot:

Achievement

Function code: JavaScript
The following code needs to be integrated into the JQuery framework.
The apiurl variable is your php api interface file address, which is found below the file code.
The function mainly focuses on the action of losing focus of the email input box.

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

Function code: PHP
Background response code, here I use a separate page file to respond,
The advantage of this is that you don’t have to call this part of the code every time you open the page,
Responding only when a request is made completely eliminates the theme's backwards compatibility concerns.
Of course, you can also mount the response function to the wp hook.

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

Summary
So……. Very simple, right?
Request-> Response-> Add A total of three steps.
Of course, in order to enhance logic and highlight organization, some necessary data are filtered here
There are also some misjudgments, let’s just leave these for thinking.