在評(píng)論者輸入郵箱后，異步獲得評(píng)論者的頭像并顯示出來(lái)，個(gè)人感覺這個(gè)功能雖不能給用戶體驗(yàn)帶來(lái)多大的提升，也不算是一個(gè)實(shí)用的功能，但至少很炫，看到有的網(wǎng)站有添加這個(gè)功能，我也不甘寂寞所以也寫了個(gè)腳本，沒有時(shí)間做封裝，所以直接上原理和代碼。
異步動(dòng)態(tài)調(diào)用頭像原理
貌似很多步驟，其實(shí)很簡(jiǎn)單，我們只要將自己的主題稍作修改就可以到達(dá)效果。
簡(jiǎn)單功能截圖：
實(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)輸入正確郵箱地址'); } }) $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……. 很簡(jiǎn)單吧？
請(qǐng)求-> 響應(yīng) -> 添加 總共三步曲。
當(dāng)然，這里為了增強(qiáng)邏輯性，突出條理，把一些必要的數(shù)據(jù)過(guò)濾，
還有一些錯(cuò)誤判斷，這些就算是留作思考吧。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
