用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代码(星期六,星期日总和)
Nov 12 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
Jul 15 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
Nov 18 PHP
CodeIgniter配置之autoload.php自动加载用法分析
Jan 20 PHP
PHP+JQUERY操作JSON实例
Mar 23 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
Jun 02 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
Dec 26 PHP
PHP微信支付结果通知与回调策略分析
Jan 10 PHP
thinkPHP框架乐观锁和悲观锁实例分析
Oct 30 PHP
PHP常用字符串函数用法实例总结
Jun 04 PHP
open_basedir restriction in effect. 原因与解决方法
Mar 14 PHP
如何使用php生成zip压缩包
Apr 21 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实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
js Dialog 实践分享
2012/10/22 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
js闭包学习心得总结
2018/04/17 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
python绘制汉诺塔
2021/03/01 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
英语专业推荐信
2013/11/16 职场文书
领导干部培训感言
2014/01/23 职场文书
20年同学聚会感言
2014/02/03 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
安全横幅标语
2014/06/09 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2015年助残日活动总结
2015/03/27 职场文书
中标通知书格式
2015/04/17 职场文书
工作态度不好检讨书
2015/05/06 职场文书
生产实习心得体会范文
2016/01/22 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript