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 相关文章推荐
桌面中心(四)数据显示
Oct 09 PHP
一段php加密解密的代码
Jul 16 PHP
php的ajax框架xajax入门与试用介绍
Dec 19 PHP
php加密算法之实现可逆加密算法和解密分享
Jan 21 PHP
一个PHP的ZIP压缩类分享
May 04 PHP
简单的php新闻发布系统教程
May 09 PHP
php中error与exception的区别及应用
Jul 28 PHP
php 问卷调查结果统计
Oct 08 PHP
PHP实现大数(浮点数)取余的方法
Feb 18 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
Oct 15 PHP
Yii框架模拟组件调用注入示例
Nov 11 PHP
phpstorm激活码2020附使用详细教程
Sep 25 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+ajax导入大数据时产生的问题处理
2014/06/11 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
python调用自定义函数的实例操作
2019/06/26 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Apache部署Django项目图文详解
2019/07/30 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
介绍一下Ruby的特点
2013/01/20 面试题
小学教师节活动方案
2014/01/31 职场文书
黄金搭档广告词
2014/03/21 职场文书
开业主持词
2014/03/21 职场文书
活动倡议书范文
2014/05/13 职场文书
门店店长岗位职责
2015/04/14 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python