PHP结合jQuery实现的评论顶、踩功能


Posted in Javascript onJuly 22, 2015

当我们浏览网页时,我们想对网页内容如文章、评论中的观点持赞同或反对意见时,可以通过点击网页中的“顶”和“踩”来进行投票。而整个交互过程,开发者可以通过ajax异步来实现,从而提高用户体验。

本文结合实例,讲解使用PHP+MySql+jQuery实现的“顶”和“踩”投票功能,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中。如果您具备PHP、MySql和jQuery相关基础知识,那么请继续往下阅读。

准备

我们先要准备为整个实例运行所需的mysql数据表,实例中需要两个表,votes表用来记录对应文章或评论的用户投票数,并且我们默认写入一条id为1的数据以便演示,votes_ip表用来记录用户每次投票的IP,程序根据用户IP决定投票是否有效。

CREATE TABLE IF NOT EXISTS `votes` ( 
 `id` int(10) NOT NULL AUTO_INCREMENT, 
 `likes` int(10) NOT NULL DEFAULT '0', 
 `unlikes` int(10) NOT NULL DEFAULT '0', 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 
 
 
INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES 
(1, 30, 10); 
 
CREATE TABLE IF NOT EXISTS `votes_ip` ( 
 `id` int(10) NOT NULL, 
 `vid` int(10) NOT NULL, 
 `ip` varchar(40) NOT NULL 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

HTML

在页面中,有两个分别表示“顶”和“踩”的按钮,即#dig_up和#dig_down,按钮上记录了投票的票数以及分别所占的百分比,非常直观的对比投票结果。

<div class="digg"> 
  <div id="dig_up" class="digup"> 
    <span id="num_up"></span> 
    <p>很好,很强大!</p> 
    <div id="bar_up" class="bar"><span></span><i></i></div> 
  </div> 
    <div id="dig_down" class="digdown"> 
    <span id="num_down"></span> 
    <p>太差劲了!</p> 
    <div id="bar_down" class="bar"><span></span><i></i></div> 
  </div> 
  <div id="msg"></div> 
</div>

CSS

我们必须使用CSS来美化页面,我们使用一张图diggs.png来定位不同的按钮背景,通过设置position来定位各元素之间的位置关系。

.digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative} 
#dig_up,#dig_down{width:200px; height:48px; margin:10px; position:relative; 
border:1px solid #d3d3d3; padding-left:42px; cursor:pointer} 
.digup{background:url(diggs.png) no-repeat 4px 2px;} 
.digup_on{background:url(diggs.png) no-repeat 4px -49px;} 
.digdown{background:url(diggs.png) no-repeat 4px -102px;} 
.digdown_on{background:url(diggs.png) no-repeat 4px -154px;} 
#num_up,#num_down{position:absolute; right:6px; top:18px; font-size:20px;} 
#dig_up p{height:24px; line-height:24px; color:#360} 
#dig_down p{height:24px; line-height:24px; color:#f30} 
.bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0; 
position:relative; text-align:center} 
.bar span{display:block; height:12px; } 
.bar i{position:absolute; top:0; left:104px;} 
#bar_up span{background:#360} 
#bar_down span{background:#f60} 
#msg{position:absolute; right:20px; top:40px; font-size:18px; color:#f00}

jQuery

本示例还依赖于jQuery,因此一定不能忘了在页面中先载入jquery库文件。

首先,jQuery要处理的是鼠标分别滑向两个投票按钮时变换的背景图片,通过addClass()和removeClass()来实现。

$(function(){ 
  //鼠标滑向和离开投票按钮时,变换背景样式 
  $("#dig_up").hover(function(){ 
    $(this).addClass("digup_on"); 
  },function(){ 
    $(this).removeClass("digup_on"); 
  }); 
  $("#dig_down").hover(function(){ 
    $(this).addClass("digdown_on"); 
  },function(){ 
    $(this).removeClass("digdown_on"); 
  }); 
   
  //初始化数据 
  getdata("do.php",1); 
   
  //单击“顶”时 
  $("#dig_up").click(function(){ 
    getdata("do.php?action=like",1); 
  }); 
  //单击“踩”时 
  $("#dig_down").click(function(){ 
    getdata("do.php?action=unlike",1); 
  }); 
});

然后,我们初始化数据,就是页面加载后,要显示初始的已经投票的结果,包括各投票数和所占百分比。我们将获取数据的操作写在一个自定义函数getdata()中,通过传递不同的请求地址和id参数来完成数据的载入。函数getdata()中,向URL发送一个ajax请求,根据后台处理的返回结果,如果投票成功则更改页面中相应的元素内容,包括投票数和所占百分比。

function getdata(url,sid){ 
  $.getJSON(url,{id:sid},function(data){ 
    if(data.success==1){//投票成功 
      $("#num_up").html(data.like); 
      //通过控制宽度来显示百分比进度条效果 
      $("#bar_up span").css("width",data.like_percent); 
      $("#bar_up i").html(data.like_percent); 
      $("#num_down").html(data.unlike); 
      $("#bar_down span").css("width",data.unlike_percent); 
      $("#bar_down i").html(data.unlike_percent); 
    }else{//投票失败 
      $("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}) 
      .animate({top:'-50px',opacity:0}, "slow"); 
    } 
  }); 
}

PHP

数据的获取都是通过do.php来完成,do.php根据前端页面传递的参数,连接数据库,根据条件判断分别进入“顶”、“踩”和初始数据处理模块,以下是do.php模块代码结构:

include_once("connect.php");//连接数据库 
 
$action = $_GET['action']; 
$id = 1; 
$ip = get_client_ip();//获取ip 
 
if($action=='like'){//顶 
  likes(1,$id,$ip); 
}elseif($action=='unlike'){//踩 
  likes(0,$id,$ip); 
}else{ 
  echo jsons($id); 
}

函数likes()用来处理“顶”和“踩”投票模块,首先是判断用户IP是否已经投票过了,如果已经投票则直接返回相应提示,如果用户IP没有投票记录则更新votes表,将对应的投票数加1,然后向votes_ip表中插入该用户的IP记录,如果操作成功,则调用jsons()输出投票后的投票数和所占百分比等数据,否则输入操作失败的提示信息。

function likes($type,$id,$ip){ 
  $ip_sql=mysql_query("select ip from votes_ip where vid='$id' and ip='$ip'"); 
  $count=mysql_num_rows($ip_sql); 
  if($count==0){//还没有顶过 
    if($type==1){//顶 
      $sql = "update votes set likes=likes+1 where id=".$id; 
    }else{//踩 
      $sql = "update votes set unlikes=unlikes+1 where id=".$id; 
    } 
    mysql_query($sql); 
     
    $sql_in = "insert into votes_ip (vid,ip) values ('$id','$ip')"; 
    mysql_query($sql_in); 
     
    if(mysql_insert_id()>0){ 
      echo jsons($id); 
    }else{ 
      $arr['success'] = 0; 
      $arr['msg'] = '操作失败,请重试'; 
      echo json_encode($arr); 
    } 
  }else{ 
    $msg = $type==1?'您已经顶过了':'您已经踩过了'; 
    $arr['success'] = 0; 
    $arr['msg'] = $msg; 
    echo json_encode($arr); 
  } 
}

函数jsons()用来读取votes表中相应id的投票数,并计算百分比,最后将这些信息以json格式输出,供前端页面使用。

function jsons($id){ 
  $query = mysql_query("select * from votes where id=".$id); 
  $row = mysql_fetch_array($query); 
  $like = $row['likes']; 
  $unlike = $row['unlikes']; 
  $arr['success']=1; 
  $arr['like'] = $like; 
  $arr['unlike'] = $unlike; 
  $like_percent = round($like/($like+$unlike),3)*100; 
  $arr['like_percent'] = $like_percent.'%'; 
  $arr['unlike_percent'] = (100-$like_percent).'%'; 
   
  return json_encode($arr); 
}

该实例可以应用到常见的"赞"、同意和反对评论、投票系统等场景中,运用了Ajax原理实现的前后端交互功能。do.php中还有个函数get_client_ip()用来获取用户真实IP,这个函数之前我有文章也发过,已打包在代码中欢迎下载,在此不贴出来了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
一个判断email合法性的函数[非正则]
Dec 09 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
vue中的inject学习教程
Apr 24 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
使用express来代理服务的方法
Jun 21 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 #Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 #Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 #Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 #Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 #Javascript
详解参数传递四种形式
Jul 21 #Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 #Javascript
You might like
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
js数组操作常用方法
2014/05/08 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
学习新党章思想汇报
2014/01/09 职场文书
人力资源作业细则
2014/03/03 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android