视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
WordPress中利用AJAX异步获取评论用户头像的方法_javascript技巧
2020-11-27 21:48:35 责编:小采
文档
 在评论者输入邮箱后,异步获得评论者的头像并显示出来,个人感觉这个功能虽不能给用户体验带来多大的提升,也不算是一个实用的功能,但至少很炫,看到有的网站有添加这个功能,我也不甘寂寞所以也写了个脚本,没有时间做封装,所以直接上原理和代码。

异步动态调用头像原理

  • 获得用户输入
  • 过滤用户输入
  • 传递变量到后台
  • 后台处理数据,并返回头像的HTML代码
  • 获得后台返回数据,将HTML代码加载到当前页面
  • 貌似很多步骤,其实很简单,我们只要将自己的主题稍作修改就可以到达效果。

    简单功能截图:

    实现

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

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

    下载本文
    显示全文
    专题