欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

WordPress中利用AJAX異步獲取評(píng)論用戶頭像的方法

 更新時(shí)間:2016年01月08日 17:22:06   作者:稍息少年  
這篇文章主要介紹了WordPress中利用AJAX異步獲取評(píng)論用戶頭像的方法,文中的例子是輸入郵箱即可獲取頭像,需要的朋友可以參考下

在評(píng)論者輸入郵箱后,異步獲得評(píng)論者的頭像并顯示出來,個(gè)人感覺這個(gè)功能雖不能給用戶體驗(yàn)帶來多大的提升,也不算是一個(gè)實(shí)用的功能,但至少很炫,看到有的網(wǎng)站有添加這個(gè)功能,我也不甘寂寞所以也寫了個(gè)腳本,沒有時(shí)間做封裝,所以直接上原理和代碼。

異步動(dòng)態(tài)調(diào)用頭像原理

  • 獲得用戶輸入
  • 過濾用戶輸入
  • 傳遞變量到后臺(tái)
  • 后臺(tái)處理數(shù)據(jù),并返回頭像的HTML代碼
  • 獲得后臺(tái)返回?cái)?shù)據(jù),將HTML代碼加載到當(dāng)前頁面

貌似很多步驟,其實(shí)很簡單,我們只要將自己的主題稍作修改就可以到達(dá)效果。

簡單功能截圖:

201618171924137.jpg (519×388)

實(shí)現(xiàn)

功能代碼:JavaScript
以下代碼需集成 JQuery 框架中。
apiurl 變量為你的php api 接口文件地址,文件代碼下面有。
功能主要集中在email輸入框失去焦點(diǎn)的動(dòng)作上。

 function getAvatar(authorEmail) {//獲得頭像代碼封裝函數(shù)
 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輸入框失去焦點(diǎn)綁定的動(dòng)作
 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('請(qǐng)輸入正確郵箱地址');
 }
 })

功能代碼:PHP
后臺(tái)響應(yīng)代碼,在這里我用了一個(gè)單獨(dú)的頁面文件來做響應(yīng),
這樣做的好處是不用打開每個(gè)頁面的時(shí)候都去調(diào)用這部分代碼,
只是在做出請(qǐng)求時(shí)才去響應(yīng),這樣做可以完全摒棄主題的向后兼容顧慮。
當(dāng)然你也可以將響應(yīng)函數(shù)掛載到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 "請(qǐng)求內(nèi)容不充分";
 break;
 }
 }

總結(jié)
So……. 很簡單吧?
請(qǐng)求-> 響應(yīng) -> 添加 總共三步曲。
當(dāng)然,這里為了增強(qiáng)邏輯性,突出條理,把一些必要的數(shù)據(jù)過濾,
還有一些錯(cuò)誤判斷,這些就算是留作思考吧。

相關(guān)文章

最新評(píng)論