WordPress中利用AJAX异步获取评论用户头像的方法

发布时间：2020-12-15 23:28:58 所属栏目：百科来源：网络整理

导读：在评论者输入邮箱后，异步获得评论者的头像并显示出来，个人感觉这个功能虽不能给用户体验带来多大的提升，也不算是一个实用的功能，但至少很炫，看到有的网站有添加这个功能，我也不甘寂寞所以也写了个脚本，没有时间做封装，所以直接上原理和代码。异步动

在评论者输入邮箱后，异步获得评论者的头像并显示出来，个人感觉这个功能虽不能给用户体验带来多大的提升，也不算是一个实用的功能，但至少很炫，看到有的网站有添加这个功能，我也不甘寂寞所以也写了个脚本，没有时间做封装，所以直接上原理和代码。

异步动态调用头像原理

获得用户输入
过滤用户输入
传递变量到后台
后台处理数据，并返回头像的HTML代码
获得后台返回数据，将HTML代码加载到当前页面

貌似很多步骤，其实很简单，我们只要将自己的主题稍作修改就可以到达效果。

简单功能截图：

实现

功能代码：JavaScript 以下代码需集成 JQuery 框架中。 apiurl 变量为你的php api 接口文件地址，文件代码下面有。功能主要集中在email输入框失去焦点的动作上。

var avatarhtml = '<div id="get-avatar-img" style="display:none;">';
avatarhtml += '

';
$('#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('请输入正确邮箱地址');
}
})

if($action){//留下以后添加功能的空间，你懂的。
switch ($action) {
case 'get_avatar':
$email = isset($_REQUEST['email']) ? $_REQUEST['email']: false ;
if($email){
echo get_avatar($email,60);
}
break;

default:
echo "请求内容不充分";
break;
}
}

总结

So……. 很简单吧？请求-> 响应 -> 添加总共三步曲。当然，这里为了增强逻辑性，突出条理，把一些必要的数据过滤，还有一些错误判断，这些就算是留作思考吧。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!