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

当我们浏览网页时,我们想对网页内容如文章、评论中的观点持赞同或反对意见时,可以通过点击网页中的“顶”和“踩”来进行投票。而整个交互过程,开发者可以通过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,这个函数之前我有文章也发过,已打包在代码中欢迎下载,在此不贴出来了。

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

(0)

相关推荐

  • php中使用Akismet防止垃圾评论的代码

    然而,人无完人,插(件)无完插!Akismet也并非完美,最近, 我常在被Akismet评判为垃圾的留言中找到"好人"的留言,然而,有时时间长了就自动删除了,损失珍贵的友情和留言. 别忘了修改代码中的 __YOUR_AKISMET_KEY__, __YOUR_WEBSITE_URL__ and __YOUR_NAME__ http://www.script-tutorials.com/akismet-spam-protection/ index.php 复制代码 代码如下: <?

  • php实现评论回复删除功能

    简单的评论回复删除功能,具体内容如下 一.数据库 建立两张表,一是pinglun表:二是huifu表 效果如下: 代码如下: 1.主页面 main.php <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <h1>朋友圈</h1> <div>内容:</div>

  • ThinkPHP无限级分类原理实现留言与回复功能实例

    本文所述留言板程序使用了无限级分类的原理,可以实现无限级留言与回复.留言列表gclist保留了留言层次空格,使留言--回复层次分明.分享给大家供大家参考.具体分析如下: 功能上,本程序可以实现无限级留言与回复,即对留言回复,对回复的留言回复.当然你也可以作有限制的控制,使其只对留言回复,关键是在模板代码中去掉回复的留言中的"回复该留言"即可.欢迎去拍砖! 程序效果如下图所示: 完整源码点击此处本站下载. 数据表: 复制代码 代码如下: -- ----------------------

  • php简单的留言板与回复功能具体实现

    在网上找了这方面的教程 但是基本就是没有人说什么 然后在某一天看见一个PHP程序设计出了一张类似这样的数据库设计图之后就有了很多领悟!下面是数据库的结构图 下面我们就来继续一下介绍 id                        这个算是父Id 可以通过这个id来查询 在这个id下是否有子id 同时也可以记录这个是那条留言的id son_id                    这个是子id 然后通过这个id 可以找到相对应的父id   news_id                  

  • 详解WordPress中调用评论模板和循环输出评论的PHP函数

    comments_template comments_template 函数是一个调用评论模板的函数,使用起来很简单,与get_header()等函数一样,是一个include文件类函数,今天来讲一下他的使用. 描述 上面已经讲过了,就是调用评论模板的一个函数. 使用 <?php comments_template( $file, $separate_comments ); ?> 其中 $file 需要调用的文件名 默认值: /comments.php $separate_comments 是

  • PHP Ajax实现页面无刷新发表评论

    大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助. 那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: var http_request=false;  function send_request(url){//初始化,指定处理函数,发送请求的函数    http_request

  • ThinkPHP上使用多说评论插件的方法

    本文实例讲述了ThinkPHP上使用多说评论插件的方法.分享给大家供大家参考.具体实现方法如下: 先前访问网友的一些网站,他们好些的局部都发生了变化,如文章的评论模块设计得和谐美观,集表情和分享工具于一体,而且可以盖楼式评论,当时我真是称赞不已,真牛啊,能开发出这样的评论模块!后来聊天我才知道,原来他们是使用了多说评论插件. 什么是多说? 多说是一款追求极致体验的社会化评论框,可以用微博.QQ.人人.豆瓣等帐号登录并评论,用社交账号登录,进行评论,同时转发到社交平台(可选),进行回复.标记喜欢.

  • 使用AngularJS和PHP的Laravel实现单页评论的方法

    完整代码:https://github.com/scotch-io/laravel-angular-comment-app 目前,Laravel和Angular均已经成为了Web发展世界里非常著名的工具.Laravel以给PHP社区引入的伟大内容著称,Angular以其惊人的前端工具及简单著称.组合这两大框架似乎是合乎逻辑的下一步. 在我们的使用环境下,我们将使用Laravel作为后端的RESTful API,Angular作为前端,以创建一个简单的单页的评论应用. 下面是一个简单的例子,展示了

  • PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例

    说起来做这个功能还真是一时好奇.前段时间在做一个淘客网站的时候,想到是否能抓取到淘宝商品的买家秀呢?经过一番折腾发现,淘宝商品用户评价信息是通过Ajax来调取的,通过嗅探网址发现,评论数据的请求接口是: https://rate.tmall.com/list_detail_rate.htm?itemId=524394294771&spuId=341564036&sellerId=100414600&order=3&currentPage=1&append=0&

  • php实现网站顶踩功能的完整前端代码

    许多网站都支持顶.踩功能,以便于显示用户对当前网页内容的满意度反馈.下面我们给出本站使用的顶.踩功能的完整前台实现代码,以便于用户参考. 完整的前端代码包括html.css.js各部分的代码.使用下列前端代码,加上自行简单实现的后台代码,即可实现完整的顶踩功能. 前端html代码: <div id="vote" data_id="文章唯一key"> <span id="dig" class="vote-btn"

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

    当我们浏览网页时,我们想对网页内容如文章.评论中的观点持赞同或反对意见时,可以通过点击网页中的"顶"和"踩"来进行投票.而整个交互过程,开发者可以通过ajax异步来实现,从而提高用户体验. 本文结合实例,讲解使用PHP+MySql+jQuery实现的"顶"和"踩"投票功能,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中.如果您具备PHP.MySql和jQuery相关基础知识,那么请继续往下阅读. 准

  • 基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码

    先给大家展示效果图: 查看演示 下载源码 这是一个非常实用的投票实例,应用在双方观点对抗投票场景.用户可以选择支持代表自己观点的一方进行投票,本文以红蓝双方投票为例,通过前后台交互,直观展示红蓝双方投票数和所占比例,应用非常广泛. 本文是一篇综合知识应用类文章,需要您具备PHP.jQuery.MySQL以及html和css方面的基本知识. HTML 我们需要在页面中展示红蓝双方的观点,以及对应的投票数和比例,以及用于投票交互的手型图片,本例以#red和#blue分别表示红蓝双方..redhand

  • jQuery实现表格冻结顶栏效果

    昨天晚上公司遇到个小需求,就是实现类似表格冻结顶栏的效果,具体描述就是下面动态图的效果 这样的效果不算是很难,但是实现起来确实挺麻烦的,这里的难点就不多说了,就是这个效果一下子弄到一点多,最后在我经常逛的一个网站里找到了答案. 原问题的地址:https://segmentfault.com/q/1010000000130774 这里介绍一下这个小插件的用法.首先先去著名'同性'交往网站github里把代码下载下来.解压后是这样的: 主要用到是我红色框框里的,也可以看人家的源代码.这里只需要引用j

  • jQuery实现的监听导航滚动置顶状态功能示例

    本文实例讲述了jQuery实现的监听导航滚动置顶状态功能.分享给大家供大家参考,具体如下: 1. js代码 /** * Created by EDUASK on 2016/5/20. */ $(function(){ //引入id标签; var navtive=$("#native"); //设置导航标签为置顶; var offsetTop=navtive.offset().top; //定义一个监听高度; var scrollHeight=$(document).scrollTop;

  • jQuery实现简单评论功能

    本文实例为大家分享了jQuery实现简单评论功能的具体代码,供大家参考,具体内容如下 例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /

  • jQuery实现简单评论区功能

    本文实例为大家分享了jQuery实现简单评论区的具体代码,供大家参考,具体内容如下 直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

  • jQuery实现简单评论区

    本文实例为大家分享了jQuery实现简单评论区的具体代码,供大家参考,具体内容如下 1.我们先来看看效果 ①点击"发布" ②点击"删除评论" 2.如何实现 首先我们用html和css来进行编写这样一个区域: html内容: <div id="box"> <div id="fabu"> <textarea placeholder="请输入内容吧!!!" id="text

  • jQuery实现的页面遮罩层功能示例【测试可用】

    本文实例讲述了jQuery实现的页面遮罩层功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

  • jQuery基于cookie实现换肤功能实例

    本文实例讲述了jQuery基于cookie实现换肤功能.分享给大家供大家参考,具体如下: 换肤,在你使用QQ.浏览器.酷狗等软件时,总是能看到这两个字(也有叫皮肤).不过换肤的确能解决很多人的口味,换肤看似一个无关紧要的功能,但其实能起到吸引用户的作用.好啦,话不多说,开始上课. 附上本人的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

随机推荐