jQuery+Ajax+PHP实现“喜欢”评级功能

有同学问我如何实现一个像美丽说那样的“我喜欢”评级功能,当用户看到自己喜欢的图片或文章时,点击“红心”按钮,系统会自动记录用户的点击,并将总数加1。这样再结合不同的系统,可以将此功能应用到投票或收藏商品中去(如淘宝的收藏商品)。

实现过程

本文基于jQuery,通过PHP与mysql实现了一个评级功能,是一个简单的非常好的ajax应用实例。

用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经“喜欢过了”。

数据库设计

先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“喜欢”总数,pic_ip则记录用户点击喜欢后的IP数据。

  1. CREATE TABLE IF NOT EXISTS `pic` ( 
  2.   `id` int(11) NOT NULL AUTO_INCREMENT, 
  3.   `pic_name` varchar(60) NOT NULL
  4.   `pic_url` varchar(60) NOT NULL
  5.   `love` int(11) NOT NULL DEFAULT '0'
  6.   PRIMARY KEY (`id`) 
  7. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 
  8.  
  9. CREATE TABLE IF NOT EXISTS `pic_ip` ( 
  10.   `id` int(11) NOT NULL AUTO_INCREMENT, 
  11.   `pic_id` int(11) NOT NULL
  12.   `ip` varchar(40) NOT NULL
  13.   PRIMARY KEY (`id`) 
  14. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 

index.php

在index.php中,我们通过PHP读取pic表中的图片信息并展示出来,结合CSS,提升页面展示效果。

  1. <?php 
  2.      include_once("connect.php"); 
  3.      $sql = mysql_query("select * from pic"); 
  4.      while($row=mysql_fetch_array($sql)){ 
  5.          $pic_id = $row['id']; 
  6.          $pic_name = $row['pic_name']; 
  7.          $pic_url = $row['pic_url']; 
  8.          $love = $row['love']; 
  9.      ?> 
  10.      <li><img src="images/<?php echo $pic_url;?>" alt="<?php echo $pic_name;?>"><p><a href="#"  
  11. title="我喜欢"class="img_on" rel="<?php echo $pic_id;?>"><?php echo $love;?></a></p></li> 
  12.  <?php }?> 

CSS中,我们将定义鼠标滑向和离开红心按钮的动态效果,并定位按钮的位置。

  1. .list{width:760pxmargin:20px auto
  2. .list li{float:leftwidth:360pxheight:280pxmargin:10pxposition:relative
  3. .list li p{position:absolute; top:0; left:0width:360pxheight:24pxline-height:24px;  
  4. background:#000; opacity:.8;filter:alpha(opacity=80);} 
  5. .list li p a{padding-left:30pxheight:24pxbackground:url(images/heart.png) no-repeat  
  6. 4px -1px;color:#ffffont-weight:boldfont-size:14px
  7. .list li p a:hover{background-position:4px -25px;text-decoration:none

jQuery代码

当用户点击自己喜欢的图片上的红心按钮时,向后台love.php发送ajax请求,请求响应成功后,更新原有的数值。

  1. $(function(){ 
  2.     $("p a").click(function(){ 
  3.         var love = $(this); 
  4.         var id = love.attr("rel"); //对应id 
  5.         love.fadeOut(300); //渐隐效果 
  6.         $.ajax({ 
  7.             type:"POST"
  8.             url:"love.php"
  9.             data:"id="+id, 
  10.             cache:false//不缓存此页面 
  11.             success:function(data){ 
  12.                 love.html(data); 
  13.                 love.fadeIn(300); //渐显效果 
  14.             } 
  15.         }); 
  16.         return false
  17.     }); 
  18. }); 

love.php

后台love.php接收前端的ajax请求,根据提交的图片id值,查找IP表中是否已有该用户ip的点击记录,如果有则告诉用户已“喜欢过了”,反之,则进行一下操作:

1、更新图片表中对应的图片love字段值,将数值加1。

2、将该用户IP信息写入到pic_ip表中,用以防止用户重复点击。

3、获取更新后的love值,即喜欢该图片的用户总数,并将该总数输出给前端页面。

  1. include_once("connect.php"); //连接数据库 
  2.  
  3. $ip = get_client_ip(); //获取用户IP 
  4. $id = $_POST['id']; 
  5. if(!isset($id) || empty($id)) exit
  6.  
  7. $ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'"); 
  8. $count=mysql_num_rows($ip_sql); 
  9. if($count==0){ //如果没有记录 
  10.     $sql = "update pic set love=love+1 where id='$id'"//更新数据 
  11.     mysql_query( $sql); 
  12.     $sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')"//写入数据 
  13.     mysql_query( $sql_in); 
  14.     $result = mysql_query("select love from pic where id='$id'"); 
  15.     $row = mysql_fetch_array($result); 
  16.     $love = $row['love']; //获取love数值 
  17.     echo $love
  18. }else
  19.     echo "喜欢过了.."

代码中get_client_ip()函数是用来获取用户的真实IP,具体请。

转载请注明:代码家园 » jQuery+Ajax+PHP实现“喜欢”评级功能

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)