联系电话:0755-27515592
最新动态:

PHP教程

你的位置: 首页>>智慧亿恩>>PHP教程

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

点击数:13322015-07-19 17:52:21 来源: 外贸网站建设,深圳外贸网站建设,深圳网站建设,外贸商城网站制作-亿恩科技

新闻摘要:本文章来给大家介绍一个jQuery+Ajax+PHP实现喜欢评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否

本文章来给大家介绍一个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. return false; 
  26. }); 
  27. }); 
  28. </script> 
  29. <style type="text/css"
  30. .clear{clear:both} 
  31. .list{width:760px; margin:20px auto} 
  32. .list li{float:left; width:360px; height:280px; margin:10px; position:relative} 
  33. .list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px; background:#000; opacity:.8;filter:alpha(opacity=80);} 
  34. .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} 
  35. .list li p a:hover{background-position:4px -25px;text-decoration:none} 
  36. </style> 
  37. </head> 
  38.  
  39. <body> 
  40.  
  41. <div id="main"
  42.  
  43. <ul class="list"
  44. <?php 
  45. include_once("connect.php"); 
  46. $sql = mysql_query("select * from pic"); 
  47. while($row=mysql_fetch_array($sql)){ 
  48. $pic_id = $row['id']; 
  49. $pic_name = $row['pic_name']; 
  50. $pic_url = $row['pic_url']; 
  51. $love = $row['love']; 
  52. ?> 
  53. <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> 
  54. <?php }?> 
  55. </ul> 
  56. //开源代码vcphp.com 
  57. </div> 
  58.  
  59. </body> 
  60. </html> 

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.     $(
【责任编辑:(Top) 返回页面顶端
贴心
全国7×24小时客服热线
安全
病毒杀除率高于99%
稳定
网站可用性高于99.9%
实力
服务68家上市企业及集团公司
亿恩科技手机站
关注亿恩科技微信

亿恩科技—企业信息化一站式服务专家


Copyright © 2008- 深圳市亿恩科技有限公司版权所有 粤ICP备15056041号

联系我们 | 常见问题 | 在线留言 | 支付方式 | 软件开发 | 我的观点 | 资质荣誉 | 服务流程