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

实现
功能代码:JavaScript
以下代码需集成 JQuery 框架中。
apiurl 变量为你的php api 接口文件地址,文件代码下面有。
功能主要集中在email输入框失去焦点的动作上。
功能代码: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……. 很简单吧?
请求-> 响应 -> 添加 总共三步曲。
当然,这里为了增强逻辑性,突出条理,把一些必要的数据过滤,
还有一些错误判断,这些就算是留作思考吧。