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+xslt在windows平台上
Oct 09 PHP
PHP入门
Oct 09 PHP
在任意字符集下正常显示网页的方法一
Apr 01 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
Oct 06 PHP
php 目录遍历、删除 函数的使用介绍
Apr 28 PHP
php使用strtotime和date函数判断日期是否有效代码分享
Dec 25 PHP
php使用sql server验证连接数据库的方法
Dec 25 PHP
PHP面试题之文件目录操作
Oct 15 PHP
PHP实现支付宝即时到账功能
Dec 21 PHP
PHP串行化与反串行化实例分析
Dec 27 PHP
详解Yii2.0使用AR联表查询实例
Jun 16 PHP
PHP7 整型处理机制修改
Mar 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
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
js中的闭包实例展示
2018/11/01 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
Python列表推导式的使用方法
2013/11/21 Python
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python连接DB2数据库
2016/08/27 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
django 外键创建注意事项说明
2020/05/20 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
授权委托书范本
2014/04/03 职场文书
关于青春的演讲稿
2014/05/05 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
MySQL锁机制
2021/04/05 MySQL
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
vue实现拖拽交换位置
2022/04/07 Vue.js