在隔壁的两个邻居都发现了使用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;
});
July 23,2018 20:32:07
阅读2.2k
Comments
WRZ
这个代码不错,学习了,另祝站长 新年快乐!
天津网站建设
这个有用,收藏了
大雄
瑾忆博客,似乎听过。
瑾忆
@大雄:扒过你甜甜圈的人,问过你图片剪栽的人
撰写评论