PHP + AJAX 實現點贊/點踩功能完整實例（含資料庫結構）

透過 AJAX 異步請求實現無刷新點贊，提升用戶體驗。本文提供前後端完整代碼、資料庫結構與關鍵邏輯說明，可直接整合至專案。

資料庫設計

CREATE TABLE `finger_ajax` (
    `id` INT(11) NOT NULL AUTO_INCREMENT,
    `title` VARCHAR(50) NOT NULL DEFAULT '',
    `finger` INT(11) NOT NULL DEFAULT '0',
    PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `finger_ajax` VALUES
(1, '今天天氣還不錯哦！去做點什麼好呢？', 10),
(2, '歡迎來到 www.jb51.net，國慶將至，祝大家國慶節快樂！！', 3);

後端處理（finger_ajax.php）

<?php
header('Content-Type: text/plain; charset=utf-8');

// 資料庫配置
$db = new mysqli('localhost', 'root', 'password', 'test');
$db->set_charset('utf8');

// 僅處理 POST 請求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['id'])) {
    $id = (int)$_POST['id'];
    $stmt = $db->prepare('UPDATE `finger_ajax` SET `finger` = `finger` + 1 WHERE `id` = ?');
    $stmt->bind_param('i', $id);
    echo $stmt->execute() ? 'ok' : 'failed';
    $stmt->close();
}
$db->close();

安全提醒：使用預處理語句防止 SQL 注入；生產環境應加入 CSRF Token 驗證、頻率限制、用戶身份識別（防止重複點贊）。

前端頁面（index.php）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AJAX 點贊示例</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<?php
$mysqli = new mysqli('localhost', 'root', 'password', 'test');
$mysqli->set_charset('utf8');
$res = $mysqli->query('SELECT * FROM `finger_ajax`');
while ($row = $res->fetch_assoc()) {
    echo "<p>{$row['title']}<br>";
    echo "<a href='#' class='finger-btn' data-id='{$row['id']}'>";
    echo "<img src='finger.jpg' alt='贊'> 贊一下 (<span class='finger-count-{$row['id']}'>{$row['finger']}</span>)";
    echo "</a></p>";
}
$mysqli->close();
?>

<script>
$(function() {
    $('.finger-btn').on('click', function(e) {
        e.preventDefault();
        var $btn = $(this);
        var id = $btn.data('id');
        var $count = $('.finger-count-' + id);

        $.post('finger_ajax.php', {id: id}, function(resp) {
            if (resp === 'ok') {
                $count.text(parseInt($count.text()) + 1);
                alert('感謝您的支持！');
            } else {
                alert('操作失敗，請稍後再試。');
            }
        });
    });
});
</script>
</body>
</html>

關鍵點總結

• 前端使用 data-id 屬性綁定記錄 ID，避免內聯 onclick。
• jQuery .post() 簡化 AJAX 請求，回調中更新 DOM 計數器。
• 後端採用 mysqli 預處理語句，回傳純文本 ok/failed。
• 擴展方向：加入用戶 Cookie/Session 記錄防重複、Redis 計數器提升效能、WebSocket 推送實時數量。