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 相关文章推荐
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
js仿微博动态栏功能
Feb 22 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
js中的数组对象排序分析
Dec 11 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 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
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
基于ionic实现下拉刷新功能
2018/05/10 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
Python入门教程之if语句的用法
2015/05/14 Python
Python2随机数列生成器简单实例
2017/09/04 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Python shelve模块实现解析
2019/08/28 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
国贸专业的职业规划书
2014/03/15 职场文书
党员创先争优承诺书
2014/03/26 职场文书
百日安全生产活动总结
2014/07/05 职场文书
新娘婚礼致辞
2015/07/27 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书