ajax实现在线投票,10分钟实现Ajax Vote投票、评分功能(Stars)
在现在Web2的理念之下，讲求“互动”是任何一个网站不可或缺的一个核心。如何让用户参与进来，可以说是任何一个网站开发人员需要认真考虑的问题。
当我们开展一项新的服务的时候，或者当我们需要知道用户对一篇文章的反响的时候，我们最常用的就是一个vote投票系统，用户可以匿名或者实名来进行参与。所以，在实现这个功能的时候，我们就要考虑到用户的体验问题，当投票或者评分成功之后，跳转或者弹出式的一种模式都是不太友好的。
我们期望的是一种在局部进行操作的，然后可以很友好得进行反馈的服务。
所以，我们需要应用ajax来进行异步的传输。使页面更加友好，而且功能强大。
我们做如下的假设：我们需要一个五颗星的评价体系，用户可以动态选择他所需要的分数，提交后可以得到已经存在的结果。
为了实现这个动态，我们需要做的第一步就是CSS的工作，
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 125px;
height: 25px;
position: relative;
background: url(../img/alt_star.gif) top left repeat-x; }
.star-rating li{
padding:0px;
margin:0px;
float: left;
}
.star-rating li a{
display:block;
width:25px;
height: 25px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(../img/alt_star.gif) left bottom;
z-index: 2;
left: 0px;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:25px;
}
.star-rating a.two-stars{
left:25px;
}
.star-rating a.two-stars:hover{
width: 50px;
}
.star-rating a.three-stars{
left: 50px;
}
.star-rating a.three-stars:hover{
width: 75px;
}
.star-rating a.four-stars{
left: 75px;
} .star-rating a.four-stars:hover{
width: 100px;
}
.star-rating a.five-stars{
left: 100px;
}
.star-rating a.five-stars:hover{
width: 125px;
}
.star-rating li.current-rating{
background: url(../img/alt_star.gif) left center;
position: absolute;
height: 25px;
display: block;
text-indent: -9000px;
z-index: 1;
}
从这段CSS中，我们可以得知，我们首先将一个空心star的图进行repeat(一个star 宽25px, 我们需要5个，所以25*5成为
ul的长度)做为背景，然后我们创建不同的hover来实现不同位置替换成为实心star,达到选择的目的。例如选择一个星星的时候，我们需要的是
left;0px, width:25px,这样来替换背景。
数据库的设计：
这个比较明显的是每一个good都会存在多个分数，由不同的用户产生。所以 Good $hasMany Star
----table star----
id star user_id good_id
----------------------------------------------------
--------------------star.thtml---------------
- px' >
- link('1','/stars/update/1',
array('title'=>'一个星','class'=>'one-stars','update' => array('first', 'second')))?>
- link('2','/stars/update/2',
array('title'=>'二个星','class'=>'two-stars','update' => array('first', 'second')))?>
- link('3','/stars/update/3',
array('title'=>'三个星','class'=>'three-stars','update' => array('first', 'second')))?>
- link('4','/stars/update/4',
array('title'=>'四个星','class'=>'four-stars','update' => array('first', 'second')))?>
- link('5','/stars/update/5',
array('title'=>'五个星','class'=>'five-stars','update' => array('first', 'second')))?>
这样，我们就是实现了，动态选择的目的。
下面，我们需要利用ajax技术来实现保存传递过来的分数。
我们首先创建一个function:
function update($id=null)
{
$user_id= 2;
$good_id=1;
$this->Star->query("INSERT INTO `stars` ( `id` , `star` , `user_id`,`good_id` ) VALUES (NULL , $id, $user_id, $good_id)"); $this->set('all',$this->requestAction('/goods/getStar/'));
$this->layout= 'ajax';
}
当我们使用$ajax->link('4','/stars/update/4',...)的时候，我们可以取得当前的id,然后存入到数据库中，达到异步的效果。
当然，我们还需要将保存后的结果反馈给用户。
----------update.thtml------------
div('first'); ?>
foreach($all['0']['Star'] as $star)
{$current +=$star['star'];}
$num=count($all['0']['Star']);
echo "Have".$num."Peolpe Vote"; $avg=$current/$num*25; echo " --Total:".$avg;
?>
divEnd('first'); ?>
这样，我们可以利用Cake存在的$ajax Helper 轻松实现这个投票的功能。