搞了一个小玩意
这玩意其实搞Wordpress的估计有很多人都在用，搞typecho的很少看到噢。
废话不多说，直接录了个小动图来展示，看下面：
看到了不？对啦，其实就是评论时输出邮箱后，动态拉取Gravatar头像显示在右侧，用的是Ajax
其实这个功能没啥鸟用啦，不过看看还可以
接下来真的不想搞评论部分了，感觉完全被带偏了，在这里花了太多时间 - -！
说好的引导页还没有作优化呢。。。
赶紧赶紧的！
贴下示例代码（请原谅我懒得写CSS样式了），这是输入框页面，随便新建一个HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax获取Gravatar头像 by https://kisxy.com</title>
</head>
<body>
<div>输入邮箱地址后点击任意空白区域</div>
<div><input type="email" id="getavatar" name="getavatar" value="" onblur="getavatar(this.value)"></div><p></p>
<div id="showava">头像在这里显示</div>
<script type="text/javascript">
//传递值给str
function getavatar(str) {
//实例化 XMLHttpRequest对象
if(window.XMLHttpRequest){
//非IE
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXobject('Microsoft.XMLHTTP');
}
//给xhr 绑定事件 检测请求的过程
xhr.onreadystatechange = function(){
//console.log(xhr.readyState);
//如果成功接收到响应
if(xhr.status == 200 && xhr.readyState == 4){
//获取头像后输出到页面指定ID元素内
document.getElementById('showava').innerHTML = xhr.responseText;
}
}
//进行请求的初始化
xhr.open('get', './getavatar.php?p1='+str, true);
//正式发送请求
xhr.send();
}
</script>
</body>
</html>
然后是同目录下新建php文件：getavatar.php，代码如下：
<?php
//传入邮箱地址
$s1 = $_GET["p1"];
//去前后空格，转小写，md5转码
$mdmd5 = md5(strtolower(trim($s1)));
//获取头像地址
$avatar = 'https://secure.gravatar.com/avatar/' . $mdmd5 . '?s=80';
//输出头像
echo "<img src='".$avatar."'>";
?>
好了，自己测试效果吧！
Tags : 动态获取头像
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网，如果有侵权内容、不妥之处，请联系我们删除。敬请谅解！
Previous post
再谈谈Gravatar头像
Next post
关于markdown有一个想法
已有 2 条评论