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面向对象全攻略 (二) 实例化对象 使用对象成员
Sep 30 PHP
一个比较简单的PHP 分页分组类
Dec 10 PHP
PHP内核介绍及扩展开发指南―基础知识
Sep 11 PHP
解析php5配置使用pdo
Jul 03 PHP
php curl获取网页内容(IPV6下超时)的解决办法
Jul 16 PHP
php密码生成类实例
Sep 24 PHP
PHPUnit安装及使用示例
Oct 29 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
Mar 12 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
Aug 01 PHP
php使用fullcalendar日历插件详解
Mar 06 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
Oct 30 PHP
Laravel5.1框架路由分组用法实例分析
Jan 04 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结合jQuery实现找回密码
2015/07/22 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python性能测试工具locust的使用
2020/12/28 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
李开复演讲稿
2014/05/24 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
自荐信怎么写
2015/03/04 职场文书
Nginx利用Logrotate实现日志分割
2022/05/20 Servers