用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中用foreach来操作数组的代码
Jul 17 PHP
php 多关键字 高亮显示实现代码
Apr 23 PHP
PHP 之Section与Cookie使用总结
Sep 14 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
Mar 13 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
Nov 24 PHP
php简单防盗链实现方法
Jul 29 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
Jan 05 PHP
CI(Codeigniter)的Setting增强配置类实例
Jan 06 PHP
PHP中调用C/C++制作的动态链接库的教程
Mar 10 PHP
简单实现php上传文件功能
Sep 21 PHP
在 Laravel 项目中使用 webpack-encore的方法
Jul 21 PHP
laravel框架中表单请求类型和CSRF防护实例分析
Nov 23 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
DSP接收机前端设想
2021/03/02 无线电
php操作excel文件 基于phpexcel
2010/07/02 PHP
php实现简单爬虫的开发
2016/03/28 PHP
PHP7新功能总结
2019/04/14 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
js登录弹出层特效
2014/03/07 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python continue语句用法实例
2014/03/11 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
图解Python变量与赋值
2018/04/03 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
人工神经网络算法知识点总结
2019/06/11 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
如何用SQL语句进行模糊查找
2015/09/25 面试题
鼓励运动员的广播稿
2014/02/08 职场文书
创意广告词
2014/03/17 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
Python 多线程处理任务实例
2021/11/07 Python