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 相关文章推荐
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
Jun 08 PHP
php jquery 实现新闻标签分类与无刷新分页
Dec 18 PHP
php和javascript之间变量的传递实现代码
Dec 19 PHP
解析php dirname()与__FILE__常量的应用
Jun 24 PHP
使用PHP实现阻止用户上传成人照片或者裸照
Dec 25 PHP
smarty内置函数capture用法分析
Jan 22 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
Mar 21 PHP
PHP数据库表操作的封装类及用法实例详解
Jul 12 PHP
PHP序列化操作方法分析
Sep 28 PHP
php简单随机字符串生成方法示例
Apr 19 PHP
PHP使用pdo实现事务处理操作示例
Sep 05 PHP
PHP Swoole异步读取、写入文件操作示例
Oct 24 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/12/05 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
JS 控件事件小结
2012/10/31 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
PHP7新特性简述
2017/06/11 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
python绘制高斯曲线
2021/02/19 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
Javascript如何发送一个Ajax请求
2015/01/26 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
食品行业求职人的自我评价
2014/01/19 职场文书
计划生育汇报材料
2014/12/26 职场文书
银行催款通知书
2015/04/17 职场文书
文艺节目主持词
2015/07/06 职场文书
新郎新娘致辞
2015/07/31 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
图解上海144收音机
2021/04/22 无线电