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


Posted in PHP onJanuary 30, 2015

本文实例讲述了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 相关文章推荐
IP攻击升级,程序改进以对付新的攻击
Nov 23 PHP
php开发环境配置记录
Jan 14 PHP
php替换超长文本中的特殊字符的函数代码
May 22 PHP
深入array multisort排序原理的详解
Jun 18 PHP
PHP中获取时间的下一周下个月的方法
Mar 18 PHP
php实现最简单的MVC框架实例教程
Sep 08 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
Jul 01 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
Aug 23 PHP
PHP微信开发之查询微信精选文章
Jun 23 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
Sep 02 PHP
Thinkphp5结合layer弹窗定制操作结果页面
Jul 07 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
May 30 PHP
PHP制作百度词典查词采集器
Jan 29 #PHP
php+mysqli事务控制实现银行转账实例
Jan 29 #PHP
php+mysqli批量查询多张表数据的方法
Jan 29 #PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
Jan 29 #PHP
php+mysqli使用面向对象方式查询数据库实例
Jan 29 #PHP
php+mysqli使用面向对象方式更新数据库实例
Jan 29 #PHP
新浪SAE搭建PHP项目教程
Jan 28 #PHP
You might like
php修改指定文件后缀的方法
2014/09/11 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python3图片文件批量重命名处理
2019/10/31 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
python能开发游戏吗
2020/06/11 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
python接入支付宝的实例操作
2020/07/20 Python
Linux上比较文件的命令都有哪些
2012/02/24 面试题
《会走路的树》教后反思
2014/04/19 职场文书
工作检讨书怎么写
2014/10/10 职场文书
护士个人年终总结
2015/02/13 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
复兴之路观后感3000字
2015/06/02 职场文书