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+javascript模拟Matrix画面
Oct 09 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
Feb 22 PHP
php二分法在IP地址查询中的应用
Aug 12 PHP
PHP的单引号和双引号 字符串效率
May 27 PHP
destoon利用Rewrite规则设置网站安全
Jun 21 PHP
php模拟post提交数据的方法
Feb 12 PHP
启用Csrf后POST数据时出现的400错误
Jul 05 PHP
ThinkPHP表单数据智能写入create方法实例分析
Sep 27 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
Feb 27 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
Mar 01 PHP
php和C#的yield迭代器实现方法对比分析
Jul 17 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
Dec 02 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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
用JQUERY增删元素的代码
2012/02/14 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python结合API实现即时天气信息
2016/01/19 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python 正确保留多位小数的实例
2018/07/16 Python
Python实现图片添加文字
2019/11/26 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
python 实现aes256加密
2020/11/27 Python
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
大学学风建设方案
2014/05/04 职场文书
国旗下演讲稿
2014/05/08 职场文书
会计学自荐信
2014/06/03 职场文书
国际商务专业求职信
2014/07/15 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
工作年限证明模板
2015/06/15 职场文书
2016年感恩节寄语
2015/12/07 职场文书
六五普法心得体会2016
2016/01/21 职场文书