提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  数据库

当前栏目

php+mysql结合Ajax实现点赞功能完整实例

mysql实例PHPAJAX 实现 功能 结合 完整
2023-06-13 09:15:43 时间

本文实例讲述了php+mysql结合Ajax实现点赞功能的方法。分享给大家供大家参考。具体如下：

要实现点赞功能，有多种实现方式，这里总结一下利用Ajax，php和mysql来实现点赞的数据的功能。具体步骤如下：

一、页面中的HTML代码部分：

<span>0</span>
<buttononclick="goodplus(1);">good+1</button>

<span>0</span>
<buttononclick="goodplus(2);">good+1</button>

<span>0</span>
<buttononclick="goodplus(3);">good+1</button>

<span>0</span>
<buttononclick="goodplus(4);">good+1</button>

二、写javascript

1、实现上面的button的点击事件goodplus

varspan=document.getElementsByTagName("span");//获取存放点赞数的dom
varnum;//点赞数
varflag=0;//不同情况的标记

functiongoodplus(gindex){
flag=1;
num=parseInt(span.item(gindex-1).innerHTML);
if(checkcookie(gindex)==true){
num=num+1;
senddata(gindex);//通过Ajax修改页面上的数据
}else{
alert("你已经点过赞咯！")
}
}

2、页面一打开时就应该更新点赞数据

for(vari=1;i<span.length+1;i++){
senddata(i);
}

3、通过Ajax获取数据senddata函数

functionsenddata(aindex){
varxmlhttp;
vartxt;
if(window.XMLHttpRequest){
xmlhttp=newXMLHttpRequest();
}else{
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
txt=xmlhttp.responseText;//获取返回的数据
varcookieindex=aindex-1;
document.getElementsByTagName("span").item(cookieindex).innerHTML=txt;//赋值
}
}
xmlhttp.open("GET","路径/index.php?num="+num+"&flag="+flag+"&aindex="+aindex,true);
xmlhttp.send();
}

4、通过设置cookie来判断是否已经点赞，如果有cookie则提示已经点赞，如果没有cookie则允许点赞，而且会设置cookie

//判断是否已经存在了cookie
functioncheckcookie(gindex){
varthiscookie="goodplus"+gindex;
varmapcookie=getCookie(thiscookie)
if(mapcookie!=null&&mapcookie!=""){
returnfalse;
}else{
setCookie(thiscookie,thiscookie,365);
returntrue;
}
}

//获取cookie
functiongetCookie(c_name){//获取cookie，参数是名称。
if(document.cookie.length>0){//当cookie不为空的时候就开始查找名称
c_start=document.cookie.indexOf(c_name+"=");
if(c_start!=-1){//如果开始的位置不为-1就是找到了、找到了之后就要确定结束的位置
c_start=c_start+c_name.length+1;
//cookie的值存在名称和等号的后面，所以内容的开始位置应该是加上长度和1
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1){
c_end=document.cookie.length;
}
returnunescape(document.cookie.substring(c_start,c_end));//返回内容，解码。
}
}
return"";
}

//设置cookie
functionsetCookie(c_name,value,expiredays){
//存入名称，值，有效期。有效期到期事件是今天+有效天数。然后存储cookie，
varexdate=newDate();
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString())
}

三、index.php页面：

<?php
$num=$_GET["num"];
$aindex=$_GET["aindex"];
$con=mysql_connect("localhost","root","");

if(!$con){
die("Couldnotconnect:".mysql_error());
}

mysql_select_db("goodplus",$con);

$sql0s="SELECT*FROM`good`where`id`=".$aindex;
$sql0=mysql_query($sql0s);

if($_GET["flag"]==0){
while($row=mysql_fetch_array($sql0)){
echo$row["value"];
}
}elseif($_GET["flag"]==1){
$sql="UPDATE`goodplus`.`good`SET`value`="".$num.""WHERE`good`.`id`=".$aindex;

if(!mysql_query($sql,$con)){
die("Error:".mysql_error());
}
echo$num;
}
mysql_close($con)
?>

四、最终的index.html页面如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
</head>

<body>

<span>0</span>
<buttononclick="goodplus(1);">good+1</button>

<span>0</span>
<buttononclick="goodplus(2);">good+1</button>

<span>0</span>
<buttononclick="goodplus(3);">good+1</button>

<span>0</span>
<buttononclick="goodplus(4);">good+1</button>

<scripttype="text/javascript">
varspan=document.getElementsByTagName("span");
varnum;
varflag=0;

for(vari=1;i<span.length+1;i++){
senddata(i);
}

functiongoodplus(gindex){
flag=1;
num=parseInt(span.item(gindex-1).innerHTML);
if(checkcookie(gindex)==true){
num=num+1;
senddata(gindex);
}else{
alert("你已经点过赞咯！")
}
}

functionsenddata(aindex){
varxmlhttp;
vartxt;
if(window.XMLHttpRequest){
xmlhttp=newXMLHttpRequest();
}else{
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
txt=xmlhttp.responseText;
varcookieindex=aindex-1;
document.getElementsByTagName("span").item(cookieindex).innerHTML=txt;
}
}
xmlhttp.open("GET","/ajax/json/index.php?num="+num+"&flag="+flag+"&aindex="+aindex,true);
xmlhttp.send();
}

//判断是否已经存在了cookie
functioncheckcookie(gindex){
varthiscookie="sdcity_foodmap_goodplus"+gindex;
varmapcookie=getCookie(thiscookie)
if(mapcookie!=null&&mapcookie!=""){
returnfalse;
}else{
setCookie(thiscookie,thiscookie,365);
returntrue;
}
}

//获取cookie
functiongetCookie(c_name){
//获取cookie，参数是名称。
if(document.cookie.length>0){
//当cookie不为空的时候就开始查找名称
c_start=document.cookie.indexOf(c_name+"=");
if(c_start!=-1){
//如果开始的位置不为-1就是找到了、找到了之后就要确定结束的位置
c_start=c_start+c_name.length+1;
//cookie的值存在名称和等号的后面，所以内容的开始位置应该是加上长度和1
c_end=document.cookie.indexOf(";",c_start);
if(c_end==-1){
c_end=document.cookie.length;
}
returnunescape(document.cookie.substring(c_start,c_end));//返回内容，解码。
}
}
return"";
}

//设置cookie
functionsetCookie(c_name,value,expiredays){
//存入名称，值，有效期。有效期到期事件是今天+有效天数。然后存储cookie，
varexdate=newDate();
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString())
}
</script>
</body>
</html>

希望本文所述对大家的php程序设计有所帮助。

相关文章