首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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+mysql结合Ajax实现点赞功能完整实例

- Author -

fonglezen

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
利用static实现表格的颜色隔行显示的代码
Sep 02 PHP
php5中类的学习
Mar 28 PHP
邮箱正则表达式实现代码(针对php)
Jun 21 PHP
使用PHP获取汉字的拼音(全部与首字母)
Jun 27 PHP
php实现检查文章是否被百度收录
Jan 27 PHP
PHP批量去除BOM头代码分享
Jun 26 PHP
PHP实现根据图片色界在不同位置加水印的方法
Aug 08 PHP
php打包压缩文件之ZipArchive方法用法分析
Apr 30 PHP
Yii框架实现邮箱激活的方法【数字签名】
Oct 18 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
Jun 30 PHP
PHP多进程编程之僵尸进程问题的理解
Oct 15 PHP
基于PHP-FPM进程池探秘
Oct 17 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
html5+(1) RabbitMQ(3) Get(1) plus.io(1) 入门基础(1) 虚拟机(3) Vmware(3) 磁盘管理(1) 目录管理(1) Hash(1)
You might like
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP之预定义接口详解
2015/07/29 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
Javascript 实现微信分享（QQ、朋友圈、分享给朋友）
2016/10/21 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
python写入xml文件的方法
2015/05/08 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
20招让你的Python飞起来!
2016/09/27 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python opencv如何实现图片绘制
2020/01/19 Python
python实现超级玛丽游戏
2020/03/18 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Python接口开发实现步骤详解
2020/04/26 Python
pandas 数据类型转换的实现
2020/12/29 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
大学生赌博检讨书
2014/09/22 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
大学生见习报告范文
2014/11/03 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书