php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)


Posted in PHP onJuly 24, 2020

记录每个赞的点赞用户,以及对赞的数量统计
首先判断用户是否点赞。根据是否点赞,载入不同的html,调用不同的方法

已点赞

如果已点赞,显示已点赞的html,进行取消点赞操作

未点赞

如果未点赞,显示未点赞的html,进行点赞操作

对于不同操作,对数据库进行增加或减少操作。同时对于不同用户的点赞,进行增加记录或删除记录操作。通过控制不同按钮的背景,来显示不同的效果。通过记录不同用户的用户id和赞的id之间的关系,进行不同点赞的限制。

效果演示

当用户id为1时,进行点赞,点赞数加1

php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)

更改用户id,当id为2时,用户1的用户已进行了点赞,点赞数在用户1点赞基础上增加1

php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)

数据库

数据库,分为两个数据表。一个进行对点赞数的统计,一个进行不同用户的点赞记录。

两个数据表的详细信息

php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)

连接数据库

$con = new mysqli('localhost','root','','test');
	if (!$con)
	{
	 die('连接数据库失败,失败原因:' . mysqli_error());
	}else {
	 // echo "连接成功";
	}

对用户是否点赞进行判断(操作页面)

对数据库的信息进行提取

//假设用户编号为1
	$uId="1";
	
	//假设赞编号为1
	$zanId="1";
	
	//查找赞id为1的点赞数
	$count=mysqli_query($con, "SELECT count FROM zanCount WHERE zanId=$zanId ");
	$countResult=mysqli_fetch_array($count);
	$countZan=$countResult['count'];
	
	//查找改用户是否对赞id为1 点赞
	$uIdLike=mysqli_query($con, "SELECT * FROM zanRecord WHERE uId=$uId ");
	$result=mysqli_fetch_array($uIdLike);

对用户是否点赞进行判断,并输出不同的html

//点赞
if (isset($result)) 
	{
	 $showZan.=<<<html
  <div class="dolikeDIV" id="dolikeDIV">
		 <button id="dolike" οnclick="zanDel()"></button>
		 <span id="zan">$countZan</span>
  </div>
html;
	 
	 
	}
	//没点赞
	else
	{
	 $showZan.=<<<html
 <div class="dolikeDIV" id="dolikeDIV">
		 <button id="donolike" οnclick="zan()"></button>
		 <span id="zan">$countZan</span>
 </div>
html;
	}
	echo $showZan;
 ?>

css样式

#dolike, #donolike 
{ 
 width:30px;
 height:30px; 
 margin-left:20px;
 float:left;}
#donolike 
{
background:url(./images/nolike.png); 
background-size:30px 30px; 
}
#dolike
{
background:url(./images/like.png);
 background-size:30px 30px; 
 }

调用的ajax方法

传递需要的数据,这里传递的时zanId 和uId
记得引入jq文件
点赞

function zan()
{
	$.ajax({
		type:"POST",
		url:"./likeSever.php",
		data:{'zanId':$("#zanId").val(),'uId':$("#uId").val()},
		success:function(text){
			$("#dolikeDIV").html(text);
		}
	});
	
}

取消点赞

function zanDel()
{
	$.ajax({
		type:"POST",
		url:"./disSever.php",
		data:{'zanId':$("#zanId").val(),'uId':$("#uId").val()},
		success:function(text){
			$("#dolikeDIV").html(text);
		}
	});
	
}

处理代码

点赞处理

//更新赞总数的数据
 mysqli_query($con,"UPDATE zanCount SET count = count+1 WHERE zanId=$zanId");
 
 //添加一条点赞记录 
 mysqli_query($con,"INSERT INTO zanRecord(zanId,uId) VALUES($zanId, $uId); ");
 
 //查找赞的总数
 @$count=mysqli_query($con, "SELECT count FROM zanCount WHERE zanId=$zanId ");
 @$countResult=mysqli_fetch_array($count);
 @$countZan=$countResult['count'];
 
 //更改输出的html
 $show="";
 $show=<<<html
 <button id="dolike" οnclick="zanDel()"></button>
		<span id="zan">$countZan</span>
html;
 echo $show;

取消点赞处理

//更新赞总数的数据
 mysqli_query($con,"UPDATE zanCount SET count = count-1 WHERE zanId=$zanId");
 
 //添加一条点赞记录
 mysqli_query($con,"DELETE FROM zanRecord WHERE zanId=$zanId AND uId=$uId ");
 
 //查找赞的总数
 @$count=mysqli_query($con, "SELECT count FROM zanCount WHERE zanId=$zanId ");
 @$countResult=mysqli_fetch_array($count);
 @$countZan=$countResult['count'];
 
 //更新html
 $show="";
 $show.=<<<html
 <button id="donolike" οnclick="zan()"></button>
		<span id="zan">$countZan</span>
html;

点赞的图片
图片自己画的,有点不太美观

php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)

到此这篇关于php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)的文章就介绍到这了,更多相关php+mysql+ajax 局部刷新点赞内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

PHP 相关文章推荐
PHP 上传文件大小限制
Jul 05 PHP
PHP中如何定义和使用常量
Feb 28 PHP
php中getservbyport与getservbyname函数用法实例
Nov 18 PHP
PHP实现加密的几种方式介绍
Feb 22 PHP
PHP面向对象之后期静态绑定功能介绍
May 18 PHP
WIFI万能钥匙密码查询接口实例
Sep 28 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
May 19 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
May 21 PHP
JSON两种结构之对象和数组的理解
Jul 19 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
Apr 26 PHP
PHP实现对xml的增删改查操作案例分析
May 19 PHP
关于PHP求解三数之和问题详析
Nov 09 PHP
php实现商城购物车的思路和源码分析
Jul 23 #PHP
PHP安全之register_globals的on和off的区别
Jul 23 #PHP
PHP代码覆盖率统计详解
Jul 22 #PHP
php实现统计IP数及在线人数的示例代码
Jul 22 #PHP
Yii使用DbTarget实现日志功能的示例代码
Jul 21 #PHP
浅谈PHP之ThinkPHP框架使用详解
Jul 21 #PHP
浅谈php常用的7大框架的优缺点
Jul 20 #PHP
You might like
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python语言描述随机梯度下降法
2018/01/04 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
python 实现超级玛丽游戏
2020/11/25 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
学习雷锋倡议书
2014/04/15 职场文书
金融保险专业求职信
2014/09/03 职场文书
行政文员岗位职责
2015/02/04 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
Python利用FlashText算法实现替换字符串
2022/03/31 Python
MySQL 计算连续登录天数
2022/05/11 MySQL