专栏中心

EEPW首页 > 专栏 > PHP+jQuery+Ajax实现点赞效果方法及源码

PHP+jQuery+Ajax实现点赞效果方法及源码

发布人:扣丁学习 时间:2020-11-13 来源:工程师 发布文章

  今天本文给大家讲述了实例php+jQuery+Ajax实现点赞效果的方法。分享给大家供大家参考,具体如下:

  数据库设计


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


  CREATETABLEIFNOTEXISTS`pic`(


  `id`int(11)NOTNULLAUTO_INCREMENT,


  `pic_name`varchar(60)NOTNULL,


  `pic_url`varchar(60)NOTNULL,


  `love`int(11)NOTNULLDEFAULT'0',


  PRIMARYKEY(`id`)


  )ENGINE=MyISAMDEFAULTCHARSET=utf8;


  CREATETABLEIFNOTEXISTS`pic_ip`(


  `id`int(11)NOTNULLAUTO_INCREMENT,


  `pic_id`int(11)NOTNULL,


  `ip`varchar(40)NOTNULL,


  PRIMARYKEY(`id`)


  )ENGINE=MyISAMDEFAULTCHARSET=utf8


  index.php


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


  <?php


  include_once("connect.php");


  $sql=mysql_query("select*frompic");


  while($row=mysql_fetch_array($sql)){


  $pic_id=$row['id'];


  $pic_name=$row['pic_name'];


  $pic_url=$row['pic_url'];


  $love=$row['love'];


  ?>


  <li><imgsrc="images/<?phpecho$pic_url;?>"alt="<?phpecho$pic_name;?>"><p><ahref="#"


  title="赞"class="img_on"rel="<?phpecho$pic_id;?>"><?phpecho$love;?></a></p></li>


  <?php}?>


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


  .list{width:760px;margin:20pxauto}


  .listli{float:left;width:360px;height:280px;margin:10px;position:relative}


  .listlip{position:absolute;top:0;left:0;width:360px;height:24px;line-height:24px;


  background:#000;opacity:.8;filter:alpha(opacity=80);}


  .listlipa{padding-left:30px;height:24px;background:url(images/heart.png)no-repeat


  4px-1px;color:#fff;font-weight:bold;font-size:14px}


  .listlipa:hover{background-position:4px-25px;text-decoration:none}


  jQuery代码


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


  $(function(){


  $("pa").click(function(){


  varlove=$(this);


  varid=love.attr("rel");//对应id


  love.fadeOut(300);//渐隐效果


  $.ajax({


  type:"POST",


  url:"love.php",


  data:"id="+id,


  cache:false,//不缓存此页面


  success:function(data){


  love.html(data);


  love.fadeIn(300);//渐显效果


  }


  });


  returnfalse;


  });


  });


  love.php


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


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


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


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


  include_once("connect.php");//连接数据库


  $ip=get_client_ip();//获取用户IP


  $id=$_POST['id'];


  if(!isset($id)||empty($id))exit;


  $ip_sql=mysql_query("selectipfrompic_ipwherepic_id='$id'andip='$ip'");


  $count=mysql_num_rows($ip_sql);


  if($count==0){//如果没有记录


  $sql="updatepicsetlove=love+1whereid='$id'";//更新数据


  mysql_query($sql);


  $sql_in="insertintopic_ip(pic_id,ip)values('$id','$ip')";//写入数据


  mysql_query($sql_in);


  $result=mysql_query("selectlovefrompicwhereid='$id'");


  $row=mysql_fetch_array($result);


  $love=$row['love'];//获取赞数值


  echo$love;


  }else{


  echo"赞过了..";


  }


  我上传的附件中数据库SQL你可以直接建立test数据库UTF8编码的,然后把SQL文件导入进去。修改一下connect.php中数据库的连接信息即可。


  总结:其实就是发了一个ajax请求,比如你要赞一个商品。商品表肯定有一个计数的字段。你发一个请求过去把这个字段+1,该成功了就返回一个现在的数。然后把页面改一下就成了:


  functionZan(goodsId,a){


  $.post("/goods/zan/"+goodsId,null,function(ret){


  if(ret.status=='ok')


  $(a).html(ret.zannum);


  else


  alert(ret.data);


  },'json');


  }


  希望本文所述对大家php程序设计有所帮助。以上就是关于PHP+AJAX实现投****功能方法及源码示例的详细介绍最后想要了解更多关于PHP开发发展前景趋势,请关注扣丁学堂官网、微信等平台,扣丁学堂PHP培训IT职业在线学习教育平台为您提供权威的PHP视频教程系统,通过千锋扣丁学堂金牌讲师在线录制的一套PHP视频教程课程,让你快速掌握PHP从入门到精通开发实战技能。扣丁学堂PHP技术交流群:374332265。

专栏文章内容及配图由作者撰写发布,仅供工程师学习之用,如有侵权或者其他违规问题,请联系本站处理。 联系我们

关键词:

相关推荐

ADI IIC-China 2012现场花絮

视频 2012-06-18

编程小技巧:如何提升编程能力?

2025-01-23

台积电预计未来五年营收复合增长率超20%

2025-01-23

Configurator电路图设计工具(Linear)

深入理解MCU启动原理

2025-01-23

ADI在线研讨会:您不知道的关于DAC的五件事

视频 2012-06-18

BMP2PCB

资源下载 2007-02-09

功率器件热设计基础(九)——功率半导体模块的热扩散

过程控制演示

视频 2012-06-18

使用MSO 5/6内置AWG进行功率半导体器件的双脉冲测试

功率器件热设计基础(十)——功率半导体器件的结构函数

全球PC市场温和复苏

2025-01-23

英伟达布局Windows PC生态系统

2025-01-23

Bluetechnix演示即插即用摄像机系统

功率器件热设计基础(十三)——使用热系数Ψth(j-top)获取结温信息

接口与隔离演示

视频 2012-06-18

CADENCE PSD14入门教程

芯原与新基讯联合推出云豹系列第二代5G RedCap/4G LTE双模调制解调器IP

BALLISTIC

资源下载 2007-02-09
更多 培训课堂
更多 焦点
更多 视频

技术专区