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

2019-11-21 23:18:34

字体：大中小

来源：转载

供稿：网友

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

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

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

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

二、写javascript

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

var span = document.getElementsByTagName('span');//获取存放点赞数的dom  var num; //点赞数  var flag = 0; //不同情况的标记    function goodplus(gindex){   flag = 1;   num = parseInt(span.item(gindex-1).innerHTML);   if(checkcookie(gindex) == true){    num = num + 1;    senddata(gindex); //通过Ajax修改页面上的数据   }else{    alert("你已经点过赞咯！")    } }

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

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

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

function senddata(aindex){   var xmlhttp;   var txt;   if(window.XMLHttpRequest){    xmlhttp=new XMLHttpRequest();   }else{    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   }   xmlhttp.onreadystatechange=function(){    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){     txt = xmlhttp.responseText; //获取返回的数据     var cookieindex = 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 function checkcookie(gindex){   var thiscookie = 'goodplus' + gindex;   var mapcookie = getCookie(thiscookie)   if (mapcookie!=null && mapcookie!=""){    return false;   }else {    setCookie(thiscookie,thiscookie,365);    return true;   }  }//获取cookie function getCookie(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;     }     return unescape(document.cookie.substring(c_start , c_end));//返回内容，解码。    }   }   return ""; }//设置cookie function setCookie(c_name,value,expiredays){//存入名称，值，有效期。有效期到期事件是今天+有效天数。然后存储cookie，   var exdate=new Date();   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('Could not connect: ' . 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']; }}else if($_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页面如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><span>0</span><button onclick="goodplus(1);">good+1</button><span>0</span><button onclick="goodplus(2);">good+1</button><span>0</span><button onclick="goodplus(3);">good+1</button><span>0</span><button onclick="goodplus(4);">good+1</button><script type="text/javascript"> var span = document.getElementsByTagName('span'); var num; var flag = 0;  for(var i = 1; i < span.length + 1; i++){ senddata(i);  }  function goodplus(gindex){ flag = 1; num = parseInt(span.item(gindex-1).innerHTML); if(checkcookie(gindex) == true){ num = num + 1; senddata(gindex); }else{ alert("你已经点过赞咯！")  } }  function senddata(aindex){ var xmlhttp; var txt; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ txt = xmlhttp.responseText; var cookieindex = 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 function checkcookie(gindex){ var thiscookie = 'sdcity_foodmap_goodplus' + gindex; var mapcookie = getCookie(thiscookie) if (mapcookie!=null && mapcookie!=""){ return false; }else { setCookie(thiscookie,thiscookie,365); return true; }  } //获取cookie function getCookie(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; } return unescape(document.cookie.substring(c_start , c_end));//返回内容，解码。 }  } return ""; } //设置cookie function setCookie(c_name,value,expiredays){//存入名称，值，有效期。有效期到期事件是今天+有效天数。然后存储cookie， var exdate=new Date(); exdate.setDate( exdate.getDate() + expiredays ) document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : "; expires=" + exdate.toGMTString()) }</script></body></html>

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

上一篇：PHP速成大法

下一篇：PHP制作百度词典查词采集器