要实现无刷新在线点赞功能,可以使用PHP和AJAX技术。首先,创建一个HTML页面,包含一个点赞按钮和一个显示点赞数的元素。然后,使用JavaScript监听点赞按钮的点击事件,并通过AJAX向服务器发送请求,更新点赞数。最后,在服务器端处理请求并返回更新后的点赞数。 以下是一个简单的示例: 1. HTML页面: ```html
首先我们需要知道这个功能逻辑流程是什么,其实很简单。首先没点赞的时候显示默认的HTML样式,当点赞就用PHP+AJAX读取数据库内的字段,返回判断是否已经存在,存在代表已经点赞,不存在就写入,然后更改HTML样式。
下面详细讲解,首先需要建立一个数据库,分为两个数据表。一个进行对点赞数的统计,一个进行不同用户的点赞记录。
写PHP接口,首先连接这个数据库。
$con=newmysqli('localhost','root','','test');if(!$con){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:30px;margin-left:20px;float:left;}#donolike{background:url(./images/nolike.png);background-size:30px30px;}#dolike{background:url(./images/like.png);background-size:30px30px;}
调用的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:"POST",url:"./disSever.php",data:{'zanId':$("#zanId").val(),'uId':$("#uId").val()},success:function(text){$("#dolikeDIV").html(text);}});}
点赞处理
//更新赞总数的数据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;