实现无刷新页面的点赞按钮：更新数据库并切换状态

一、前端代码修改 #

你当前的Ajax请求存在两个核心问题：一是data参数未传递键值对，后端无法正确识别ID；二是未利用success回调处理按钮状态切换。以下是修改后的完整前端代码：

<script type="text/javascript">
$(document).ready(function(){ 
    $(".likeBtn").on("click", function(e){
        // 阻止表单默认提交行为，避免不必要的页面跳转
        e.preventDefault();
        
        var $btn = $(this);
        var threadID = $btn.attr("id");
        // 临时禁用按钮，防止重复点击
        $btn.prop("disabled", true);

        $.ajax({
             type: "POST",
             url: "like_function.php",
             // 以键值对形式传递参数，后端通过$_POST['thread_id']获取ID
             data: {thread_id: threadID},
             // 指定返回JSON格式，方便前端解析处理
             dataType: "json",
             success:function(response)
             {
                 // 根据后端返回状态切换按钮文本
                 if(response.status === 'liked'){
                     $btn.val('取消点赞');
                 } else if(response.status === 'unliked'){
                     $btn.val('Like');
                 }
                 // 请求完成后恢复按钮可用状态
                 $btn.prop("disabled", false);
             },
             error:function(){
                 // 请求失败时恢复按钮状态并提示用户
                 $btn.prop("disabled", false);
                 alert('操作失败，请重试');
             }
        });
    });
});
</script>

<!-- 简化表单结构，Ajax模式下无需复杂的表单提交配置 -->
<form>
   <input type='submit' name='likeBtn' class='likeBtn' id='52' value='Like'>
</form>

二、后端like_function.php实现 #

后端需要接收前端传递的thread_id，结合当前登录用户信息（假设你已实现用户登录系统），判断用户是否已点赞目标内容，执行对应的数据库操作后返回状态。

<?php
session_start();
// 验证用户是否登录，未登录则返回错误
if(!isset($_SESSION['user_id'])){
    echo json_encode(['status' => 'error', 'msg' => '请先登录']);
    exit;
}

// 获取前端传递的帖子ID
$thread_id = $_POST['thread_id'] ?? '';
if(empty($thread_id)){
    echo json_encode(['status' => 'error', 'msg' => '参数错误']);
    exit;
}

// 数据库连接示例，请替换为你的实际数据库配置
$pdo = new PDO('mysql:host=localhost;dbname=your_database;charset=utf8', 'your_username', 'your_password');

// 检查当前用户是否已点赞该帖子
$checkStmt = $pdo->prepare("SELECT id FROM likes WHERE user_id = ? AND thread_id = ?");
$checkStmt->execute([$_SESSION['user_id'], $thread_id]);
$isLiked = $checkStmt->rowCount() > 0;

if($isLiked){
    // 已点赞，执行取消点赞操作（删除点赞记录）
    $deleteStmt = $pdo->prepare("DELETE FROM likes WHERE user_id = ? AND thread_id = ?");
    $deleteStmt->execute([$_SESSION['user_id'], $thread_id]);
    echo json_encode(['status' => 'unliked']);
} else {
    // 未点赞，执行点赞操作（插入点赞记录）
    $insertStmt = $pdo->prepare("INSERT INTO likes (user_id, thread_id, created_at) VALUES (?, ?, NOW())");
    $insertStmt->execute([$_SESSION['user_id'], $thread_id]);
    echo json_encode(['status' => 'liked']);
}
?>

核心注意事项 #

• 参数格式：前端Ajax的data必须用键值对传递，否则后端无法正确接收参数；
• 状态同步：后端返回JSON格式的状态标识，前端根据标识精准切换按钮文本；
• 防重复操作：点击按钮时临时禁用，请求完成后恢复，避免重复提交；
• 用户校验：必须验证用户登录状态，防止未登录用户执行点赞操作（可根据业务需求调整）。

内容的提问来源于stack exchange，提问作者Lude_Project