The method of using Ajax to get the comment user's avatar asynchronously in WordPress _javascript tips

After the reviewer enters the mailbox, asynchronously obtains the reviewer's avatar and displays it, personal feeling this function can not give the user experience to bring how much promotion, also not be a practical function, but at least very cool, see some websites have added this function, I also lonely so also wrote a script, no time to do encapsulation, So directly on the principle and code.

Asynchronous dynamic call Avatar Principle

• Get user input
• Filter User Input
• Passing variables to the background
• Background processing data, and return to the Avatar's HTML code
• Get background return data, load HTML code into the current page

Seemingly a lot of steps, in fact, very simple, we just have to modify their theme slightly can reach the effect.

Simple screenshot of function:

Realize

Functional code: JavaScript
The following code needs to be integrated into the JQuery framework.
Apiurl variables for your PHP API interface file address, below the file code.
The function mainly concentrates on the action that the email input box loses the focus.

 function Getavatar (authoremail) {//Get Avatar Code wrapper functions var nowtime = Math.Round (new Date (). Gettim
 E ()/1000); $.get (Apiurl, {action: "Get_avatar", Email:authoremail, T:nowtime}, function (data) {$ (' #get-avatar-img '). Fade
 Out (' Slow ', function () {$ (' #get-avatar-img '). HTML (data). FadeIn ();
 })
 }); } var avatarhtml = ' <div id= ' get-avatar-img ' style= ' display:none;
 > ';
 avatarhtml + = ' </div> '; $ (' #respond '). Append (avatarhtml);//Add Avatar HTML if ($ (' #email '). Val (). length > 1) Getavatar ($ (' #email '). Val ());//
 Get the mailbox address $ (' #email '). Focusout (function () {//email input box loses focus bound action 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 (' Load Avatar '). FadeIn (' fast ');
 Getavatar (Authoremail);
 else {alert (' Please enter the correct email address '); }
 })

Function code: PHP
Background response code, where I used a separate page file to do the response,
The advantage of this is that you don't have to open each page to call this part of the code,
Responding only when a request is made can completely discard the backward compatibility concerns of the topic.
Of course, you can also mount the response function on the WP hook.

 $action = Isset ($_request[' action ')? $_request[' action ': false;
 
if ($action) {//Leave space to add functionality later, you know.
 switch ($action) {case
 ' Get_avatar ':
 $email = isset ($_request[' email ')]? $_request[' email ': false;
 if ($email) {
 echo Get_avatar ($email);
 break;
 
 Default:
 echo "Not sufficient request content";
 break;
 }
 }

Summarize
so ..... It's simple, isn't it?
Request-> Response-> Add a total of three steps.
Of course, in order to enhance the logic, to highlight the organization, the necessary data filtering,
There are also some false judgments, which are reserved for thought.