jQuery+Ajax+PHP实现图片“喜欢”功能：防重复点击逻辑解析

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery+Ajax+PHP实现"喜欢"</title>
<!-- 假设 main.css 中定义了 .list, .img_on 等样式 -->
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
/* 简单示意，具体样式参考 original CSS */
.list li { position: relative; }
.list li p a { color: #fff; font-weight: bold; }
</style>
</head>
<body>
<div id="main">
<ul class="list">
<?php
include_once("connect.php");
$sql = mysql_query("select * from pic");
while($row=mysql_fetch_array($sql)){
    $id = $row['id'];
    $name = $row['pic_name'];
    $url = $row['pic_url'];
    $love = $row['love'];
?>
    <li>
        <img src="images/<?php echo $url; ?>" alt="<?php echo $name; ?>">
        <p><a href="#" title="我喜欢" class="img_on" rel="<?php echo $id; ?>"><?php echo $love; ?></a></p>
    </li>
<?php } ?>
</ul>
</div>
</body>
</html>

$(function(){ 
  $("p a.img_on").click(function(e){ 
    e.preventDefault(); // 阻止默认链接行为
    var $btn = $(this); 
    var id = $btn.attr("rel"); // 获取绑定的图片ID 
    
    // 视觉反馈：先隐藏以便后续更新
    $btn.fadeOut(300); 
    
    $.ajax({ 
      type: "POST", 
      url: "love.php", 
      data: "id=" + id, 
      cache: false, 
      success: function(data){ 
        // data 是后端返回的新数值或提示文字 
        $btn.html(data); 
        $btn.fadeIn(300); 
      } 
    }); 
  }); 
}); 

<?php
$host="localhost";
$db_user="root";
$db_pass="";
$db_name="demo";
$link=@mysql_connect($host,$db_user,$db_pass);
if(!$link) die('Connect Error');
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");

// 获取参数
$id = isset($_POST['id']) ? $_POST['id'] : '';
if(empty($id)) exit;

$ip = get_client_ip();

// 检查是否已点过
$check_sql = "SELECT ip FROM pic_ip WHERE pic_id='$id' AND ip='$ip'";
$res = mysql_query($check_sql);
$count = mysql_num_rows($res);

if($count == 0){
    // 未点过：更新计数并记录IP
    $update_sql = "UPDATE pic SET love=love+1 WHERE id='$id'";
    mysql_query($update_sql);
    
    $insert_sql = "INSERT INTO pic_ip (pic_id,ip) VALUES ('$id','$ip')";
    mysql_query($insert_sql);
    
    // 获取最新计数返回前端
    $result = mysql_query("SELECT love FROM pic WHERE id='$id'");
    $row = mysql_fetch_array($result);
    echo $row['love'];
} else {
    // 已点过：返回提示
    echo "喜欢过了..";
}

/**
 * 获取用户真实IP函数
 */
function get_client_ip() {
    if(getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown"))
        $ip = getenv("HTTP_CLIENT_IP");
    elseif(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))
        $ip = getenv("HTTP_X_FORWARDED_FOR");
    elseif(getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown"))
        $ip = getenv("REMOTE_ADDR");
    elseif(isset($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))
        $ip = $_SERVER['REMOTE_ADDR'];
    else
        $ip = "unknown";
    return ($ip);
}
?>