1551天 瑾忆

重要的人越来越少,剩下的人也越来越重要 ​​

Emlog使用AJAX实时获取评论头像

发布于 2年前 / 1.5k 次围观 / 4 条评论 / Emlog / 瑾忆

在隔壁的两个邻居都发现了使用Ajax来获取评论头像,emlog很少见有人用这功能,心血来潮就开始折腾了,还真的搞出了个结果。

首先地使用个php文件来与JS传递数据和处理邮箱地址转化为头像图片链接,大概就是怎么个意思吧。

PHP部分

PHP文件就自己创建,名称怎么起都可以,你开心就好。

<?php
header("Content-type: application/json; charset=utf-8"); 
$email = $_GET['email'];
if ($email){
	$hash = md5(strtolower($email));
	$avatar = 'https://secure.gravatar.com/avatar/' . $hash . '?s=100&d=monsterid';
    $host = 'https://q2.qlogo.cn/headimg_dl?dst_uin=';
    $qq = str_replace("@qq.com","",$email);
	if(strpos($email,'@qq.com')){
		if(is_numeric($qq) && strlen($qq) > 4 && strlen($qq) < 13){
			$qqtx = $host . $qq . '&spec=100';
            echo '{"pic":"'.$qqtx.'"}';
		}else{
			echo '{"pic":"'.$avatar.'"}';
		}
	}else{
			echo '{"pic":"'.$avatar.'"}';
	}
}
?>

跟隔壁那些大佬的有丁点不一样,他们的主要是获取Gravatar的头像,我加了个QQ头像,也以QQ头像为主。

JS部分

//Ajax-JSON实时获取评论头像
$("input#email").blur(function(){
		 	var _email = $(this).val();
			if (_email != '') {
	    	$.getJSON('./ajaxurl.php?email='+_email, function(avatar){// 修改为你的Ajax路径
	    		if(avatar.pic){
					$('.ajaxurl').attr('src', avatar.pic);// 修改为你自己的头像标签
	    		}
	    	});//end
			}
			return false;
		});

代码中的input#email和.ajaxurl还有那个路径,就自己看着改吧。

我这个js跟隔壁的有些不一样,但原理都是大同小异的,一个样。

折腾的小伙伴,祝你成功,反正我成功了(2333)

失败并不可怕,可怕的是不敢面对失败。

补:《Typecho使用AJAX实时获取评论头像》《WordPress使用AJAX实时获取评论头像》

修改

回过头来看,感觉自己真的好菜,代码也不规范,唉,蓝瘦。

<?php
header("Content-type: application/json; charset=utf-8"); 
$email = $_GET['email'];
if($email){
	$avatar_pic = 'https://q2.qlogo.cn/headimg_dl?dst_uin=837233287@qq.com';
    $qq = str_replace("@qq.com","",$email);
	if( strpos($email,'@qq.com') && is_numeric($qq) && strlen($qq) > 5 && strlen($qq) < 11 ){
		$qq_link = 'https://q2.qlogo.cn/headimg_dl?dst_uin=';
		$avatar_pic = $qq_link . $qq . '&spec=100';
	}else{
		$hash = md5(strtolower($email));
		$avatar_pic = 'https://secure.gravatar.com/avatar/' . $hash . '?s=100&d=monsterid';
	}
	//上一js方法配合
	//echo json_encode( array('pic' => $avatar_pic) );

	//新js方法配合,呃,对于我应该算新方法吧
	echo $avatar_pic;
}
?>
		//Ajax-JSON实时获取评论头像
		$("input#email").blur(function() {
			var _email = $(this).val();
			if (_email != '') {
				$.ajax({
					type: 'GET',
					url: _URL, // Ajax路径
					data: {
						action: 'ajax_avatar_get',  
						email: _email
					},
					success: function(data) {
						$('.ajaxurl').attr('src', data); // 头像标签
					}
				}); // end ajax
			}
			return false;
		});
  1. 2年前 (2019-01-16)
    @
    WRZ

    这个代码不错,学习了,另祝站长 新年快乐!

  2. 2年前 (2018-12-26)
    @

    这个有用,收藏了

  3. 2年前 (2018-07-26)
    @

    瑾忆博客,似乎听过。

    • 2年前 (2018-07-26)
      @ NO

      @大雄:扒过你甜甜圈的人,问过你图片剪栽的人