搜尋
首頁web前端js教程WordPress中利用AJAX非同步取得評論使用者頭像的方法_javascript技巧

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

非同步動態呼叫頭像原理

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

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

簡單功能截圖:

201618171924137.jpg (519×388)

實作

功能代碼: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']) &#63; $_REQUEST['action'] : false ;
 
if($action){//留下以后添加功能的空间,你懂的。
 switch ($action) {
 case 'get_avatar':
 $email = isset($_REQUEST['email']) &#63; $_REQUEST['email']: false ;
 if($email){
 echo get_avatar($email,60);
 }
 break;
 
 default:
 echo "请求内容不充分";
 break;
 }
 }

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
wordpress后台乱码怎么办wordpress后台乱码怎么办Feb 03, 2023 pm 01:48 PM

wordpress后台乱码的解决办法:1、在wordpress的“wp-admin”文件夹下找到“admin.header.php”文件;2、将“charset”属性值设置为“UTF-8”格式即可恢复正常。

如何解决wordpress标签错误问题如何解决wordpress标签错误问题Feb 03, 2023 pm 02:03 PM

wordpress标签错误的解决办法:1、找到并打开wordpress的“wp-includes”目录下的“class-wp.php”文件;2、修改内容为“$pathinfo = isset( $_SERVER['PATH_INFO'] )?mb_convert_encoding($_SERVER['PATH_INFO'],'utf-8','GBK') : '';”即可。

WordPress设置独立的Description和KeywordsWordPress设置独立的Description和KeywordsFeb 21, 2023 am 11:14 AM

你下载的WordPress主题提供的keywords和description这两个meta标签一般都做得很差,或者根本就不提供,这样不利于SEO。本文将指导你如何给主页、分类、页面以及文章页添加单独的Description 和 Keywords。

wordpress乱码怎么办wordpress乱码怎么办Mar 09, 2023 am 09:13 AM

wordpress乱码的解决办法:1、修改“wp-config.php”文件里的“define(’DB_CHARSET’, ‘utf8′);”为“define(’DB_CHARSET’, ”);”;2、把新数据库的编码设置成“latin1_swedish_ci”;3、以uft8的格式导入备份的数据库文件即可。

wordpress进不去怎么办wordpress进不去怎么办Feb 23, 2023 am 09:41 AM

wordpress进不去的解决办法:1、把地址栏“wp-login.php”后面的参数删掉,然后重新输入密码登录;2、登录FTP,下载“pluggable.php”文件,然后找到“ADMIN_COOKIE_PATH”并将它替换为“SITECOOKIEPATH”即可。

wordpress是saas吗wordpress是saas吗Feb 21, 2023 am 10:40 AM

wordpress不是saas。SaaS是一种软件销售模式,它主要针对云端应用软件,而WordPress是一款CMS系统,它主要针对网站构建和管理。虽然WordPress可以作为SaaS提供服务,但它本质上不是一种SaaS应用。

2023年最新WordPress视频教程推荐2023年最新WordPress视频教程推荐Oct 25, 2019 pm 01:12 PM

本次PHP中文网整合了相关的视频教程,中文手册,以及相关的精选文章安利给大家,统统免费!!!通过我们分享的视频,可随时随地免费观看教程视频,也不需要迅雷或者百度网盘下载了。

wordpress是哪一年的wordpress是哪一年的Feb 01, 2023 am 10:26 AM

wordpress是2003年发布的;Matt于2003年5月27日宣布推出第一版WordPress,受到了社区的欢迎,它基于b2 Cafelog并有显著改进;WordPress的第一个版本包括全新的管理界面、模板、XHTML 1.1兼容模板、内容编辑器。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具