In WordPress, AJAX is used to asynchronously retrieve and comment user portraits.

In WordPress, AJAX is used to asynchronously retrieve and comment user portraits.

After the reviewer enters the email address, the reviewer's profile picture is obtained asynchronously and displayed. Although this function cannot greatly improve the user experience, it is not a practical function, but at least it was so dazzling that some websites had added this function, and I was not so lonely. So I also wrote a script and didn't have time to encapsulate it, So I directly uploaded the original processing and code.

Principle of asynchronous dynamic calling of Avatar

• Obtain user input
• Filter user input
• Pass variables to the background
• The background processes the data and returns the HTML code of the Avatar.
• Obtain the data returned from the background and load the HTML code to the current page.

It seems that many steps are actually very simple. We only need to slightly modify our own theme to achieve the effect.

Simple functions:

Implementation

Function Code: JavaScript
The following code is integrated into the JQuery framework.
The apiurl variable is the address of your php api file. The file code is as follows.
The function is mainly focused on the loss of focus in the email input box.

Function getAvatar (authorEmail) {// obtain the Avatar code encapsulation function var nowtime = Math. round (new Date (). getTime ()/1000); $. get (apiurl, {action: "get_avatar", email: authorEmail, t: nowtime}, function (data) {$ ('# get-avatar-img '). fadeOut ('low', function () {parameters ('{get-avatar-img'}.html (data ). fadeIn () ;})}) ;}var avatarhtml = '<div id = "get-avatar-img" style = "display: none;"> '; avatarhtml + = '</div>'; $ ('# respond '). append (avatarhtml); // Add the Avatar HTML if ($ ('# email '). val (). length> 1) getAvatar ($ ('# email '). val (); // get the email address $ ('# email '). focusout (function () {// The email input box loses the focus binding 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) {response ('{get-avatar-img'{.html ('Load Avatar '). fadeIn ('fast '); getAvatar (authorEmail);} else {alert ('Enter the correct email address ');}})

Function Code: PHP
The background response code. Here I use a separate page file for response,
The advantage of this is that you do not need to call this part of code when opening every page,
The response is only made when the request is made. In this way, the backward compatibility concerns of the topic can be completely abandoned.
Of course, you can also mount the response function to the wp hook.

$ Action = isset ($ _ REQUEST ['action'])? $ _ REQUEST ['action']: false; if ($ action) {// leave space for adding functions later, you know. Switch ($ action) {case 'get _ avatar ': $ email = isset ($ _ REQUEST ['email'])? $ _ REQUEST ['email ']: false; if ($ email) {echo get_avatar ($ email, 60);} break; default: echo "insufficient REQUEST content "; break ;}}

Summary
So ....... Is it easy?
Request-> response-> Add a total of three steps.
Of course, in order to enhance the logic and structure, we need to filter some necessary data,
There are still some false judgments, so leave them for consideration.

Articles you may be interested in:

• How to Use PHP + AJAX to allow WordPress to dynamically load articles
• Use CDN and AJAX to accelerate jQuery loading in WordPress
• How can I solve the problem when I use wordpress's $ wpdb class to read mysql database for ajax?
• Tips for caching Gravatar headers in WordPress locally and optimizing them
• PHP script for getting and customizing avatar images in WordPress
• Customize the default comment Avatar and delay loading in WordPress
• WordPress JQuery handles sofa portraits