php+mysql结合Ajax实现点赞功能完整实例
本文实例讲述了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程序设计有所帮助。