AJAX 异步动态调用评论者头像

评论(6)

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

异步动态调用头像原理

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

貌似很多步骤,其实很简单,我们只要将自己的主题稍作修改就可以到达效果。
你可以访问YoYo,体验该功能。
简单功能截图:
功能截图

功能代码: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……. 很简单吧?
请求-> 响应 -> 添加 总共三步曲。
当然,这里为了增强逻辑性,突出条理,把一些必要的数据过滤,
还有一些错误判断,这些就算是留作思考吧。
嗯,要是有空的话可以考虑把代码精装一下做个插件出来。
后面可能会发文,讲一下怎么做一个自己的接口页面。





  1. 弱弱地问问..如何调用,,两个文件应该放到哪个地方

  2. @ymmcute
    当然有头像了》。。。。。。
    @牧风
    这个没试过,不过单做一个页面的话,所有主题都可以用。

  3. 我来啦!~看看有头像哦!

  4. @牧风
    牧总考虑就是周到,得空好好做下处理。

  5. 有个建议哟,我把同一个邮箱地址输入两遍,就请求了两次,这不节约哦

  6. 感觉挂载了,速度要更快