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

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

发布:smiling　来源: PHP粉丝网 　添加日期：2021-06-19 23:41:33　浏览: 评论：0　

本文基于jQuery，通过PHP与mysql实现了一个评级功能，是一个简单的非常好的ajax应用实例，需要的朋友可以参考下。

本文章来给大家介绍一个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. <body> 
  40. <div id="main"> 
  41. <ul class="list"> 
  42. <?php 
  43. include_once("connect.php"); 
  44. $sql = mysql_query("select * from pic"); 
  45. while($row=mysql_fetch_array($sql)){ 
  46. $pic_id = $row['id']; 
  47. $pic_name = $row['pic_name']; 
  48. $pic_url = $row['pic_url']; 
  49. $love = $row['love']; 
  50. ?> 
  51. <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> 
  52. <?php }?> 
  53. </ul> 
  54. </div> 
  55. </body> 
  56. </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. $link=mysql_connect($host,$db_user,$db_pass); 
  8. mysql_select_db($db_name,$link); 
  9. mysql_query("SET names UTF8"); 
  10. ?> 
  11.    
  12.    
  13. <?php 
  14. include_once("connect.php"); 
  15. $ip = get_client_ip(); 
  16. $id = $_POST['id']; 
  17. if(!isset($id) || emptyempty($id)) exit; 
  18. $ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'"); 
  19. $count=mysql_num_rows($ip_sql); 
  20. if($count==0){ 
  21. $sql = "update pic set love=love+1 where id='$id'"; 
  22. mysql_query( $sql); 
  23. $sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')"; 
  24. mysql_query( $sql_in); 
  25. $result = mysql_query("select love from pic where id='$id'"); 
  26. $row = mysql_fetch_array($result); 
  27. $love = $row['love']; 
  28. echo $love; 
  29. }else{ 
  30. echo "喜欢过了.."; 
  31. } 
  32. //获取用户真实IP 
  33. function get_client_ip() { 
  34. if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")) 
  35. $ip = getenv("HTTP_CLIENT_IP"); 
  36. else 
  37. if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")) 
  38. $ip = getenv("HTTP_X_FORWARDED_FOR"); 
  39. else 
  40. if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")) 
  41. $ip = getenv("REMOTE_ADDR"); 
  42. else 
  43. if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")) 
  44. $ip = $_SERVER['REMOTE_ADDR']; 
  45. else 
  46. $ip = "unknown"; 
  47. return ($ip); 
  48. } 
  49. ?> 

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

Tags: jQuery+Ajax+PHP

分享到：

推荐文章

热门文章

最新评论文章