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……. 很簡單吧？
請求-> 響應 -> 添加 總共三步曲。
當然，這裡為了增強邏輯性，突出條理，把一些必要的資料過濾，
還有一些錯誤判斷，這些就算是留作思考吧。