WordPress中利用AJAX非同步取得評論使用者頭像的方法_javascript技巧

在評論者輸入郵箱後，異步獲得評論者的頭像並顯示出來，個人感覺這個功能雖不能給用戶體驗帶來多大的提升，也不算是一個實用的功能，但至少很炫，看到有的網站有添加這個功能，我也不甘寂寞所以也寫了個腳本，沒有時間做封裝，所以直接上原理和程式碼。

非同步動態呼叫頭像原理

• 取得使用者輸入
• 過濾用戶輸入
• 傳遞變數到後台
• 後台處理數據，並傳回頭像的HTML代碼
• 取得後台返回數據，將HTML程式碼載入到目前頁面

似乎很多步驟，其實很簡單，我們只要將自己的主題稍作修改就可以到達效果。

簡單功能截圖：

實作

功能代碼：JavaScript
以下程式碼需整合 JQuery 框架中。
apiurl 變數為你的php api 介面檔案位址，檔案程式碼下面有。
功能主要集中在email輸入框失去焦點的動作。

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

功能代碼：PHP
後台回應程式碼，在這裡我用了一個單獨的頁面檔案來做回應，
這樣做的好處是不用打開每個頁面的時候都去呼叫這部分程式碼，
只是在做出請求時才去回應，這樣做可以完全拋棄主題的向後相容顧慮。
當然你也可以將響應函數掛載到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;
 }
 }

總結
So……. 很簡單吧？
請求-> 回應 -> 新增 總共三步曲。
當然，這裡為了增強邏輯性，突出條理，把一些必要的數據過濾，
還有一些錯誤判斷，這些就算是留作思考吧。