用php和jQuery来实现“顶”和“踩”的投票功能


Posted in PHP onOctober 13, 2016

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

我们先要准备为整个实例运行所需的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。

以上就是本文的全部内容,希望对大家学习php程序设计有所帮助。

PHP 相关文章推荐
php.ini中的php-5.2.0配置指令详解
Mar 27 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
Feb 16 PHP
利用php+mysql来做一个功能强大的在线计算器
Oct 12 PHP
php实现mysql封装类示例
May 07 PHP
Codeigniter框架实现获取分页数据和总条数的方法
Dec 05 PHP
简单谈谈php中的unicode和utf8编码
Jun 10 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
Mar 17 PHP
关于PHP定时发送服务的解决办法
Apr 23 PHP
Yii 2.0在Grid中格式化时间方法示例
Jun 06 PHP
php微信开发之音乐回复功能
Jun 14 PHP
php实现算术验证码功能
Dec 05 PHP
laravel实现按月或天或小时统计mysql数据的方法
Oct 09 PHP
php is_writable判断文件是否可写实例代码
Oct 13 #PHP
基于PHP制作验证码
Oct 12 #PHP
实现PHP搜索加分页
Oct 12 #PHP
如何使用PHP给图片加水印
Oct 12 #PHP
php版微信数据统计接口用法示例
Oct 12 #PHP
php版微信js-sdk支付接口类用法示例
Oct 12 #PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
Oct 12 #PHP
You might like
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
php牛逼的面试题分享
2013/01/18 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
对python中的高效迭代器函数详解
2018/10/18 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
家长评语和期望
2014/02/10 职场文书
村抢险救灾方案
2014/05/09 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
学校师德师风整改方案
2014/10/28 职场文书
怎样写离婚协议书
2015/01/26 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书