当前位置：首页 > PHP教程 > php高级应用 > 列表

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

发布:smiling　来源: PHP粉丝网 　添加日期：2014-08-27 17:33:09　浏览: 评论：0　

本文章来给大家介绍一个jQuery+Ajax+PHP实现“喜欢”评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时，前端页面向后台发送一个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. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <meta name="keywords" content="jquery"> 
  6. <meta name="description" content=""> 
  7. <title>jQuery+Ajax+PHP实现"喜欢"评级</title> 
  8. <link rel="stylesheet" type="text/css" href="../css/main.css" /> 
  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
  10. <script type="text/javascript"> 
  11. $(function(){ 
  12. $("p a").click(function(){ 
  13. var love = $(this); 
  14. var id = love.attr("rel"); 
  15. love.fadeOut(300); 
  16. $.ajax({ 
  17. type:"POST", 
  18. url:"love.php", 
  19. data:"id="+id, 
  20. cache:false, 
  21. success:function(data){ 
  22. love.html(data); 
  23. love.fadeIn(300); 
  24. } 
  25. }); 
  26. return false; 
  27. }); 
  28. }); 
  29. </script> 
  30. <style type="text/css"> 
  31. .clear{clear:both} 
  32. .list{width:760px; margin:20px auto} 
  33. .list li{float:left; width:360px; height:280px; margin:10px; position:relative} 
  34. .list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px; background:#000; opacity:.8;filter:alpha(opacity=80);} 
  35. .list li p a{padding-left:30px; height:24px; background:url(images/heart.png) no-repeat 4px -1px;color:#fff; font-weight:bold; font-size:14px} 
  36. .list li p a:hover{background-position:4px -25px;text-decoration:none} 
  37. </style> 
  38. </head> 
  39.  
  40. <body> 
  41.  
  42. <div id="main"> 
  43.  
  44. <ul class="list"> 
  45. <?php 
  46. include_once("connect.php"); 
  47. $sql = mysql_query("select * from pic"); 
  48. while($row=mysql_fetch_array($sql)){ 
  49. $pic_id = $row['id']; 
  50. $pic_name = $row['pic_name']; 
  51. $pic_url = $row['pic_url']; 
  52. $love = $row['love']; 
  53. ?> 
  54. <li><img src="images/<?php echo $pic_url;?>" alt="<?php echo $pic_name;?>"><p><a href="#" title="我喜欢" class="img_on" rel="<?php echo $pic_id;?>"><?php echo $love;?></a></p></li> 
  55. <?php }?> 
  56. </ul> 
  57. //开源代码phpfensi.com 
  58. </div> 
  59.  
  60. </body> 
  61. </html> 

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

  1. .list{width:760px; margin:20px auto}  
  2. .list li{float:left; width:360px; height:280px; margin:10px; position:relative}  
  3. .list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px;   
  4. background:#000; opacity:.8;filter:alpha(opacity=80);}  
  5. .list li p a{padding-left:30px; height:24px; background:url(images/heart.png) no-repeat   
  6. 4px -1px;color:#fff; font-weight:bold; font-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. <?php 
  2. $host="localhost"; 
  3. $db_user="root"; 
  4. $db_pass=""; 
  5. $db_name="demo"; 
  6. $timezone="Asia/Shanghai"; 
  7.  
  8. $link=mysql_connect($host,$db_user,$db_pass); 
  9. mysql_select_db($db_name,$link); 
  10. mysql_query("SET names UTF8"); 
  11. ?> 
  12.  
  13. <?php 
  14. include_once("connect.php"); 
  15. //开源代码phpfensi.com 
  16. $ip = get_client_ip(); 
  17. $id = $_POST['id']; 
  18. if(!isset($id) || emptyempty($id)) exit; 
  19.  
  20. $ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'"); 
  21. $count=mysql_num_rows($ip_sql); 
  22. if($count==0){ 
  23. $sql = "update pic set love=love+1 where id='$id'"; 
  24. mysql_query( $sql); 
  25. $sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')"; 
  26. mysql_query( $sql_in); 
  27. $result = mysql_query("select love from pic where id='$id'"); 
  28. $row = mysql_fetch_array($result); 
  29. $love = $row['love']; 
  30. echo $love; 
  31. }else{ 
  32. echo "喜欢过了.."; 
  33. } 
  34.  
  35. //获取用户真实IP 
  36. function get_client_ip() { 
  37. if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")) 
  38. $ip = getenv("HTTP_CLIENT_IP"); 
  39. else 
  40. if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")) 
  41. $ip = getenv("HTTP_X_FORWARDED_FOR"); 
  42. else 
  43. if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")) 
  44. $ip = getenv("REMOTE_ADDR"); 
  45. else 
  46. if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")) 
  47. $ip = $_SERVER['REMOTE_ADDR']; 
  48. else 
  49. $ip = "unknown"; 
  50. return ($ip); 
  51. } 
  52. ?> 

代码中get_client_ip()函数是用来获取用户的真实IP.

Tags: jQuery+Ajax+PHP php评级功能

分享到：

推荐文章

热门文章

最新评论文章