WordPress中利用AJAX異步獲取評論用戶頭像的方法
在評論者輸入郵箱后,異步獲得評論者的頭像并顯示出來,個人感覺這個功能雖不能給用戶體驗帶來多大的提升,也不算是一個實用的功能,但至少很炫,看到有的網(wǎng)站有添加這個功能,我也不甘寂寞所以也寫了個腳本,沒有時間做封裝,所以直接上原理和代碼。
異步動態(tài)調(diào)用頭像原理
- 獲得用戶輸入
- 過濾用戶輸入
- 傳遞變量到后臺
- 后臺處理數(shù)據(jù),并返回頭像的HTML代碼
- 獲得后臺返回數(shù)據(jù),將HTML代碼加載到當(dāng)前頁面
貌似很多步驟,其實很簡單,我們只要將自己的主題稍作修改就可以到達效果。
簡單功能截圖:
實現(xiàn)
功能代碼:JavaScript
以下代碼需集成 JQuery 框架中。
apiurl 變量為你的php api 接口文件地址,文件代碼下面有。
功能主要集中在email輸入框失去焦點的動作上。
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輸入框失去焦點綁定的動作 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('請輸入正確郵箱地址'); } })
后臺響應(yīng)代碼,在這里我用了一個單獨的頁面文件來做響應(yīng),
這樣做的好處是不用打開每個頁面的時候都去調(diào)用這部分代碼,
只是在做出請求時才去響應(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 "請求內(nèi)容不充分"; break; } }
總結(jié)
So……. 很簡單吧?
請求-> 響應(yīng) -> 添加 總共三步曲。
當(dāng)然,這里為了增強邏輯性,突出條理,把一些必要的數(shù)據(jù)過濾,
還有一些錯誤判斷,這些就算是留作思考吧。
- Ajax通過XML異步提交的方法實現(xiàn)從數(shù)據(jù)庫獲取省份和城市信息實現(xiàn)二級聯(lián)動(xml方法)
- ajax 異步獲取數(shù)據(jù)實現(xiàn)代碼 (js創(chuàng)建ajax對象)
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- jquery的ajax異步請求接收返回json數(shù)據(jù)實例
- jquery ajax屬性async(同步異步)示例
- Ajax請求中的異步與同步,需要注意的地方說明
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- 詳談 Jquery Ajax異步處理Json數(shù)據(jù).
- ajax異步刷新實現(xiàn)更新數(shù)據(jù)庫
- Ajax異步獲取html數(shù)據(jù)中包含js方法無效的解決方法
相關(guān)文章
echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置方法
近期要做圖表,我選擇了ECharts做可視化圖表,圖表的樣式有陰影,這篇文章主要給大家介紹了關(guān)于echarts環(huán)形圖內(nèi)部圓、外部圓形及陰影設(shè)置的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11JavaScript獲取ul中l(wèi)i個數(shù)的方法
這篇文章主要介紹了JavaScript獲取ul中l(wèi)i個數(shù)的方法,涉及javascript針對頁面HTML元素的獲取及屬性操作相關(guān)技巧,需要的朋友可以參考下2017-02-02js this函數(shù)調(diào)用無需再次抓獲id,name或標簽名
this就是你當(dāng)前要執(zhí)行的js所抓獲的節(jié)點,這樣在js里就可以不用document.getElement之類的寫法來抓獲id,name或標簽名,具體示例如下2014-03-03javascript 實現(xiàn) 秒殺,團購 倒計時展示的記錄 分享
這篇文章介紹了javascript 實現(xiàn) 秒殺,團購 倒計時展示的記錄方法,有需要的朋友可以參考一下2013-07-07