This article mainly introduces how to use AJAX to asynchronously retrieve comments to user portraits in WordPress. The example in this article is to enter an email box to get the profile picture. If you need a friend, you can refer to entering the email address in the reviewer's email box, asynchronously obtain and display comments. I personally feel that this function cannot greatly improve the user experience, and is not a practical function, but at least very dazzling, I can see that some websites have added this function, so I am not willing to be lonely, so I also wrote a script and didn't have time to encapsulate it, So I directly went to 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 =''; Avatarhtml + ='
'; $ (' # 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.