要实现无刷新在线点赞功能,可以使用PHP和AJAX技术。首先,创建一个HTML页面,包含一个点赞按钮和一个显示点赞数的元素。然后,使用JavaScript监听点赞按钮的点击事件,并通过AJAX向服务器发送请求,更新点赞数。最后,在服务器端处理请求并返回更新后的点赞数。 以下是一个简单的示例: 1. HTML页面: ```html
首先我们需要知道这个功能逻辑流程是什么,其实很简单。首先没点赞的时候显示默认的HTML样式,当点赞就用PHP+AJAX读取数据库内的字段,返回判断是否已经存在,存在代表已经点赞,不存在就写入,然后更改HTML样式。
下面详细讲解,首先需要建立一个数据库,分为两个数据表。一个进行对点赞数的统计,一个进行不同用户的点赞记录。
写PHP接口,首先连接这个数据库。
$con
=newmysqli(
'localhost'
,
'root'
''
'test'
);
if
(!
){
die
(
'连接数据库失败,失败原因:'
.mysqli_error());}
else
{
//echo"连接成功";}
对用户是否点赞进行判断(操作页面)
对数据库的信息进行提取
//假设用户编号为1$uId="1";//假设赞编号为1$zanId="1";//查找赞id为1的点赞数$count=mysqli_query($con,"SELECTcountFROMzanCountWHEREzanId=$zanId");$countResult=mysqli_fetch_array($count);$countZan=$countResult['count'];//查找改用户是否对赞id为1点赞$uIdLike=mysqli_query($con,"SELECT*FROMzanRecordWHEREuId=$uId");$result=mysqli_fetch_array($uIdLike);
对用户是否点赞进行判断,并输出不同的html
//点赞if(isset($result)){$showZan.=<<<html<divclass="dolikeDIV"id="dolikeDIV"><buttonid="dolike"οnclick="zanDel()"></button><spanid="zan">$countZan</span></div>html;}//没点赞else{$showZan.=<<<html<divclass="dolikeDIV"id="dolikeDIV"><buttonid="donolike"οnclick="zan()"></button><spanid="zan">$countZan</span></div>html;}echo$showZan;?>
CSS样式
#dolike,#donolike{
width
:
30px
;
height
margin-left
20px
float
left
;}#donolike{
background
url
(./images/nolike.png);background-
size
;}#dolike{
(./images/like.png);background-
;}
调用的ajax方法
传递需要的数据,这里传递的时zanId 和uId
记得引入jq文件
点赞
functionzan(){$.ajax({type:
"POST"
,url:
"./likeSever.php"
,data:{
'zanId'
:$(
"#zanId"
).val(),
'uId'
"#uId"
).val()},success:
function
(text){$(
"#dolikeDIV"
).html(text);}});}
取消点赞
functionzanDel(){$.ajax({type:
"./disSever.php"
点赞处理
//更新赞总数的数据mysqli_query($con,"UPDATEzanCountSETcount=count+1WHEREzanId=$zanId");//添加一条点赞记录mysqli_query($con,"INSERTINTOzanRecord(zanId,uId)VALUES($zanId,$uId);");//查找赞的总数@$count=mysqli_query($con,"SELECTcountFROMzanCountWHEREzanId=$zanId");@$countResult=mysqli_fetch_array($count);@$countZan=$countResult['count'];//更改输出的html$show="";$show=<<<html<buttonid="dolike"οnclick="zanDel()"></button><spanid="zan">$countZan</span>html;echo$show;
取消点赞处理
//更新赞总数的数据mysqli_query($con,"UPDATEzanCountSETcount=count-1WHEREzanId=$zanId");//添加一条点赞记录mysqli_query($con,"DELETEFROMzanRecordWHEREzanId=$zanIdANDuId=$uId");//查找赞的总数@$count=mysqli_query($con,"SELECTcountFROMzanCountWHEREzanId=$zanId");@$countResult=mysqli_fetch_array($count);@$countZan=$countResult['count'];//更新html$show="";$show.=<<<html<buttonid="donolike"οnclick="zan()"></button><spanid="zan">$countZan</span>html;//更新赞总数的数据mysqli_query($con,"UPDATEzanCountSETcount=count-1WHEREzanId=$zanId");//添加一条点赞记录mysqli_query($con,"DELETEFROMzanRecordWHEREzanId=$zanIdANDuId=$uId");//查找赞的总数@$count=mysqli_query($con,"SELECTcountFROMzanCountWHEREzanId=$zanId");@$countResult=mysqli_fetch_array($count);@$countZan=$countResult['count'];//更新html$show="";$show.=<<<html<buttonid="donolike"οnclick="zan()"></button><spanid="zan">$countZan</span>html;