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

 更新时间:2016年01月08日 17:22:06   作者:稍息少年  
这篇文章主要介绍了WordPress中利用AJAX异步获取评论用户头像的方法,文中的例子是输入邮箱即可获取头像,需要的朋友可以参考下

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

异步动态调用头像原理

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

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

简单功能截图:

201618171924137.jpg (519×388)

实现

功能代码: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手风琴页面制作

    这篇文章主要为大家详细介绍了JavaScript手风琴页面的制作代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • javascript实现页面的实时时钟显示示例

    javascript实现页面的实时时钟显示示例

    这篇文章主要介绍了javascript实现页面的实时时钟显示示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 页面加载完毕后滚动条自动滚动一定位置

    页面加载完毕后滚动条自动滚动一定位置

    希望页面加载完毕后向左自动滚动一定位置,下面有个不错的方法可以轻松帮大家实现下
    2014-02-02
  • JS使用队列对数组排列,基数排序算法示例

    JS使用队列对数组排列,基数排序算法示例

    这篇文章主要介绍了JS使用队列对数组排列,基数排序算法,涉及javascript队列的定义、使用,基数排序实现方法等相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • Bootstrap CSS布局之代码

    Bootstrap CSS布局之代码

    这篇文章主要介绍了Bootstrap CSS布局之代码的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript判断按钮被点击的方法

    JavaScript判断按钮被点击的方法

    javascript代码判断按钮是否被点击了在项目中经常会遇到这个需求,今天小编抽点时间给大家分享一段代码关于javascript判断按钮是否被点击的方法,感兴趣的朋友一起学习吧
    2015-12-12
  • JavaScript运动框架 多物体任意值运动(三)

    JavaScript运动框架 多物体任意值运动(三)

    这篇文章主要为大家详细介绍了JavaScript运动框架的第三部分,多物体任意值运动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js数组去重的方法汇总

    js数组去重的方法汇总

    本文给大家汇总介绍了3种javascript数组去重的方法以及示例,十分的简单实用,有需要的小伙伴可以参考下。
    2015-07-07
  • 让浏览器非阻塞加载javascript的几种方法小结

    让浏览器非阻塞加载javascript的几种方法小结

    通常大多数浏览器是并行下载资源的,但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构、脚本之间的存在依赖关系、使用document.write 向页面输出HTML等。
    2011-04-04
  • js canvas实现写字动画效果

    js canvas实现写字动画效果

    这篇文章主要为大家详细介绍了js canvas实现写字动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11

最新评论