首页
所有分类
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 相关文章推荐
php daodb插入、更新与删除数据
Mar 19 PHP
PHP 面向对象 PHP5 中的常量
May 05 PHP
解析PHP中empty is_null和isset的测试
Jun 29 PHP
thinkphp实现发送邮件密码找回功能实例
Dec 01 PHP
浅谈thinkphp的实例化模型
Jan 04 PHP
php自动识别文字编码并转换为目标编码的方法
Aug 08 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
Apr 21 PHP
PHP判断JSON对象是否存在的方法(推荐)
Jul 06 PHP
PHP多个图片压缩成ZIP的方法
Aug 18 PHP
PHP使用CURL实现下载文件功能示例
Jun 03 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
Oct 11 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
Oct 12 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
正则表达式(3) 信息校验(1) 进销存(1) list(1) pytest(3) Coroutine(1) Excel(4) gevent(1) csv(4) greenlet(1)
You might like
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
php内嵌函数用法实例
2015/03/20 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
深究AngularJS——ng-checked（回写：带真实案例代码）
2017/06/13 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
python监控进程脚本
2018/04/12 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
大众服装店创业计划书范文
2014/01/01 职场文书
好军嫂事迹材料
2014/01/15 职场文书
如何撰写岗位职责
2014/02/01 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
尝试使用Python爬取城市租房信息
2022/04/12 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server