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


Posted in Javascript onJanuary 08, 2016

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

异步动态调用头像原理

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

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

简单功能截图:

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

实现

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

function getAvatar(authorEmail) {//获得头像代码封装函数
 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输入框失去焦点绑定的动作
 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('请输入正确邮箱地址');
 }
 })
功能代码:PHP
后台响应代码,在这里我用了一个单独的页面文件来做响应,
这样做的好处是不用打开每个页面的时候都去调用这部分代码,
只是在做出请求时才去响应,这样做可以完全摒弃主题的向后兼容顾虑。
当然你也可以将响应函数挂载到wp的hook上。
$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 "请求内容不充分";
 break;
 }
 }

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

Javascript 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
学习JavaScript设计模式之状态模式
Jan 08 #Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 #Javascript
js实现对ajax请求面向对象的封装
Jan 08 #Javascript
javascript弹性运动效果简单实现方法
Jan 08 #Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 #Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 #Javascript
jquery实现简单的遮罩层
Jan 08 #Javascript
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php实现的通用图片处理类
2015/03/24 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
python支持多继承吗
2020/06/19 Python
想学画画?python满足你!
2020/12/24 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
Python实现一个论文下载器的过程
2021/01/18 Python
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
幼儿园小班教师寄语
2014/04/03 职场文书
公务员个人年终总结
2015/02/12 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
学生检讨书怎么写
2015/05/07 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
解析python中的jsonpath 提取器
2022/01/18 Python