php+jQuery+Ajax实现点赞效果的方法(附源码下载)


Posted in PHP onJuly 21, 2020

本文实例讲述了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程序设计有所帮助。

备注:三水点靠木改写了mysqli函数处理数据库操作,以方便兼容PHP7开发环境

到此这篇关于php+jQuery+Ajax实现点赞效果的方法(附源码下载)的文章就介绍到这了,更多相关php+jQuery+Ajax点赞效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

PHP 相关文章推荐
PHP伪静态写法附代码
Jun 20 PHP
php selectradio和checkbox默认选择的实现方法详解
Jun 29 PHP
php实现监听事件
Nov 06 PHP
php中stream(流)的用法
Mar 25 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
Nov 11 PHP
PHP实现格式化文件数据大小显示的方法
Jan 03 PHP
php输出图像的方法实例分析
Feb 16 PHP
Laravel实现定时任务的示例代码
Aug 10 PHP
PHP读取、解析eml文件及生成网页的方法示例
Sep 04 PHP
php实现微信企业转账功能
Oct 02 PHP
laravel 框架结合关联查询 when()用法分析
Nov 22 PHP
浅谈Laravel中使用Slack进行异常通知
May 29 PHP
WordPress中限制非管理员用户在文章后只能评论一次
Dec 31 #PHP
php实现微信公众号主动推送消息
Dec 31 #PHP
php创建桌面快捷方式实现方法
Dec 31 #PHP
开启PHP的伪静态模式
Dec 31 #PHP
thinkphp多层MVC用法分析
Dec 30 #PHP
thinkphp命名空间用法实例详解
Dec 30 #PHP
详解PHP中的null合并运算符
Dec 30 #PHP
You might like
ftp类(example.php)
2006/10/09 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JavaScript中this详解
2015/09/01 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python实现事件驱动
2018/11/21 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
专升本自我鉴定
2013/10/10 职场文书
会计的岗位职责
2014/03/15 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
保护地球的标语
2014/06/17 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
军训后的感想
2015/08/07 职场文书
详解Python内置模块Collections
2022/03/22 Python