WordPress中利用AJAX异步获取评论用户头像的方法
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了WordPress中利用AJAX异步获取评论用户头像的方法,文中的例子是输入邮箱即可获取头像,需要的朋友可以参考下
在评论者输入邮箱后,异步获得评论者的头像并显示出来,个人感觉这个功能虽不能给用户体验带来多大的提升,也不算是一个实用的功能,但至少很炫,看到有的网站有添加这个功能,我也不甘寂寞所以也写了个脚本,没有时间做封装,所以直接上原理和代码。
异步动态调用头像原理
- 获得用户输入
- 过滤用户输入
- 传递变量到后台
- 后台处理数据,并返回头像的HTML代码
- 获得后台返回数据,将HTML代码加载到当前页面
貌似很多步骤,其实很简单,我们只要将自己的主题稍作修改就可以到达效果。
简单功能截图
实现
功能代码JavaScript
以下代码需集成 JQuery 框架中。
apiurl 变量为你的php api 接口文件地址,文件代码狼蚁网站SEO优化有。
功能主要集中在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上。
后台响应代码,在这里我用了一个单独的页面文件来做响应,
这样做的好处是不用打开每个页面的时候都去调用这部分代码,
只是在做出请求时才去响应,这样做可以完全摒弃主题的向后兼容顾虑。
你也可以将响应函数挂载到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……. 很简单吧?
请求-> 响应 -> 添加 总共三步曲。
,这里为了增强逻辑性,突出条理,把一些必要的数据过滤,
还有一些错误判断,这些就算是留作思考吧。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程