学习php+jQuery+Ajax实现点赞效果的方法

学习php+jQuery+Ajax实现点赞效果的方法

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

数据库设计

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

CREATE TABLE IF NOT EXISTS `pic` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `pic_name` varchar(60) NOT NULL,
 `pic_url` varchar(60) NOT NULL,
 `love` int(11) NOT NULL DEFAULT '0',
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE IF NOT EXISTS `pic_ip` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `pic_id` int(11) NOT NULL,
 `ip` varchar(40) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8

index.php

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

<?php
	 include_once("connect.php");
	 $sql = mysqli_query($link,"select * from pic");
	 while($row=mysqli_fetch_array($sql)){
		 $pic_id = $row['id'];
		 $pic_name = $row['pic_name'];
		 $pic_url = $row['pic_url'];
		 $love = $row['love'];
	 ?>
   	<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>
    <?php }?>

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

.list{width:760px; margin:20px auto}
.list li{float:left; width:360px; height:280px; margin:10px; position:relative}
.list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px;
background:#000; opacity:.8;filter:alpha(opacity=80);}
.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}
.list li p a:hover{background-position:4px -25px;text-decoration:none}

jQuery代码

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

$(function(){
 $("p a").click(function(){
  var love = $(this);
  var id = 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); //渐显效果
   }
  });
  return false;
 });
});

love.php

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

1、更新图片表中对应的图片love字段值,将数值加1。
2、将该用户IP信息写入到pic_ip表中,用以防止用户重复点击。
3、获取更新后的赞值,即赞该图片的用户总数,并将该总数输出给前端页面。

include_once("connect.php");

$ip = get_client_ip();
$id = $_POST['id'];
if(!isset($id) || empty($id)) exit;

$ip_sql=mysqli_query($link,"select ip from pic_ip where pic_id='$id' and ip='$ip'");
$count=mysqli_num_rows($ip_sql);
if($count==0){
	$sql = "update pic set love=love+1 where id='$id'";
	mysqli_query($link,$sql);
	$sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')";
	mysqli_query($link,$sql_in);
	$result = mysqli_query($link,"select love from pic where id='$id'");
	$row = mysqli_fetch_array($result);
	$love = $row['love'];
	echo $love;
}else{
	echo "赞过了..";
}

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

源文件点击此处本站下载。

总结:

其实就是发了一个ajax请求,比如你要赞一个商品。商品表肯定有一个计数的字段。你发一个请求过去把这个字段+1

该成功了就返回一个现在的数。然后把页面改一下就成了

function Zan( goodsId, a ){
 $.post( "/goods/zan/"+goodsId, null,function( ret ){
   if( ret.status == 'ok' )
   $(a).html( ret.zannum);
   else
   alert( ret.data );
 },'json' );
}

关于学习php+jQuery+Ajax实现点赞效果的方法的文章就分享到这,如果对你有帮助欢迎继续关注我们哦

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/40802.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(1)
上一篇 2022年6月16日 23:26
下一篇 2022年6月16日 23:26

相关推荐

  • 详解使用php-imap查询操作邮件收件箱

    本篇文章带大家介绍使用php-imap查询操作邮件收件箱。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。使用php-imap查询操作邮件收件箱最近在业务场景里有接收解析用户主动发送的邮件,使用php...

    2023年3月29日
    01
  • PHP8.0中的调试工具:Blackfire

    随着网络应用的不断发展,开发人员们需要不断地学习和利用新的工具和技术以提高他们的开发效率和质量。其中,调试工具是重要的一环,它可以帮助开发人员更快地找到代码中的错误和性能问题。本文将介绍一款PHP8.0...

    2023年5月18日
    00
  • php的可变函数

    说明:就是一个变量如果加上括号,PHP的系统会解析成函数,这个变量的值必须是一个函数的名,否则报错,未定义了。 案例

    2018年4月5日
    0215
  • 谈谈PHP中的 ->、=> 和 :: 符号

    本篇文章给大家介绍一下php新手经常碰到的问题,->、=> 和 :: 这三个家伙是什么分别都是做什么的啊!看着就很晕。没关系,下面我们做一下详细的解释,如果你有C++,Perl基础,你会发现这些家伙和他们里面的...

    2022年6月11日
    0182
  • 如何实现网站验证码登录功能以及前台留言?(实用篇)

    实现原理: 验证码: 原理: 1.是一张图片 2.图片内容是随机字符 3.PHP代码即时生成图片   1.画布(设置宽高) 2.设置背景 3.设置干扰 4.把内容填充上去 验证码代码:

    2018年9月3日 PHP案例操作
    0236
  • PHP连接MySQL数据库操作实现

    方法一:普通方法(面向过程)首先,先做出如下假设(也适用与方法二和方法三) $username=your_name; $userpass=your_pass; $dbhost=localhost; $dbdatabase=your_database;下面是关键步骤://生成一个连接 $db_...

    2022年6月18日
    0126
  • 基于PHP工具箱设计商城推荐算法

    随着互联网的快速发展,电子商务已经成为了人们日常生活中不可或缺的一部分。而在日渐增多的电商网站中,商品的推荐算法显得尤为重要,它直接影响着消费者购买决策的形成。本文将讨论基于PHP工具箱如何设计商城推...

    2023年5月19日
    00
  • 深入了解PHP反射API!

    PHP中的反射API就像Java中的java.lang.reflect包一样。它由一系列可以分析属性、方法和类的内置类组成。它在某些方面和对象函数相似,比如get_class_vars(),但是更加灵活,而且可以提供更多信息。反射API也可与P...

    2022年6月11日
    0133

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息