PHP+jQuery实现基于IP去重的评论点赞踩功能

Ryan

发布时间：2026-10-13| 6人浏览过

原创

在网页内容互动场景中，实现非登录状态的点赞或反对反馈是常见需求。本方案演示如何使用 PHP、MySQL 配合 jQuery 构建一个轻量级的投票系统。通过记录访客 IP 地址并在数据库中比对，有效限制单次会话中的重复投票行为，同时利用 Ajax 技术实现无刷新更新投票结果。

目标：实现无刷新且防刷的互动投票

第1步：配置数据库与测试数据

首先需要建立两张表。votes 表用于存储特定内容（如文章或评论）的点赞数和反对数；votes_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;

第2步：构建 HTML 交互界面

页面包含两个主要按钮区域：#dig_up 代表赞同（顶），#dig_down 代表反对（踩）。每个区域内嵌数字显示和进度条容器，用于动态展示统计比例。此外还需要一个 #msg 区域用于提示错误或重复操作信息。

<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>

第3步：设计 CSS 样式与动画

利用背景精灵图（sprite）优化按钮状态切换，通过绝对定位调整进度条宽度以直观展示百分比。CSS 定义了两个类的悬停效果：.digup_on 和 .digdown_on。

.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;}
.bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0; position:relative; text-align:center}
.bar span{display:block; height:12px; background:#360}
#bar_down span{background:#f60;}

第4步：编写 jQuery 前端逻辑

引入 jQuery 库后，绑定鼠标悬停事件切换 CSS 类名以改变按钮外观。点击事件触发 getdata 函数发起 Ajax 请求，请求后端脚本并携带 ID 参数。

$(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);
  });
});

function getdata(url,sid){
  $.getJSON(url,{id:sid},function(data){
    if(data.success==1){// 投票成功，更新 UI
      $("#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");
    }
  });
}

第5步：实现 PHP 后端处理与 IP 校验

后端脚本 do.php 接收来自前端的 Action（like/unlike）和 ID。关键步骤是获取客户端真实 IP 并在数据库中查询是否已有该 IP 的记录。

include_once("connect.php"); // 确保包含正确的数据库连接文件
$action = $_GET['action'];
$id = 1;
$ip = get_client_ip(); // 需自行实现获取真实IP的逻辑

if($action=='like'){
  vote_update(1,$id,$ip); // 处理点赞逻辑
}elseif($action=='unlike'){
  vote_update(0,$id,$ip); // 处理反对逻辑
}else{
  echo jsons($id); // 初始化数据加载
}

核心函数首先检查 IP 是否存在于历史记录中。若存在则直接返回错误码；若不存在则执行 SQL 更新票数，并将该 IP 写入日志表。最终输出 JSON 格式的结果供前端解析。

function vote_update($type,$id,$ip){
  // 查询此IP是否已对该ID投过票
  $check_sql = "select ip from votes_ip where vid='$id' and ip='$ip'";
  $result = mysql_query($check_sql);
  $count = mysql_num_rows($result);

  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);

    $log_sql = "insert into votes_ip (vid,ip) values ('$id','$ip')";
    mysql_query($log_sql);

    if(mysql_insert_id() > 0){
      echo jsons($id);
    } else {
      output_error('操作失败，请重试');
    }
  } else {
    $msg = ($type==1) ? '您已经顶过了' : '您已经踩过了';
    output_error($msg);
  }
}

function jsons($id){
  $query = mysql_query("select * from votes where id=".$id);
  $row = mysql_fetch_array($query);
  $like = $row['likes'];
  $unlike = $row['unlikes'];
  $total = $like + $unlike;

  $res['success'] = 1;
  $res['like'] = $like;
  $res['unlike'] = $unlike;

  if($total > 0){
    $res['like_percent'] = round($like/$total*100, 1).'%' ;
    $res['unlike_percent'] = round($unlike/$total*100, 1).'%' ;
  } else {
    $res['like_percent'] = '0%';
    $res['unlike_percent'] = '0%';
  }
  return json_encode($res);
}

function output_error($msg){
  $arr['success'] = 0;
  $arr['msg'] = $msg;
  echo json_encode($arr);
}

以上即为基于 IP 识别进行简单防刷处理的 PHP+jQuery 评论互动功能实现细节，更多关于前后端异步交互的技术资料请关注本站其它相关文章！