基于jQuery Ajax的用户关注/取消关注无刷新操作问题排查

核心问题分析 #

1. 字段逻辑颠倒：PHP中插入和删除操作时，thefollower（关注者）和theuserid（被关注者）的赋值完全颠倒，导致数据库无法找到对应记录，删除操作失效。
2. 冗余代码：jQuery中两个独立的$(document).ready可以合并，提升代码简洁性。
3. 按钮文本交互未实现：取消关注按钮的hover文本切换逻辑未完成。

修复步骤 #

1. 修正PHP后端的字段对应关系（followuser.inc.php） #

原代码把被关注者ID错误赋值给thefollower字段，关注者ID赋值给theuserid字段，完全不符合逻辑，修改如下：

<?php
require_once 'dbh.inc.php';
require_once 'functions.inc.php';

if (isset($_POST["submitFollow"])){
    $follower_id = $_POST["theuserid"]; // 当前登录用户（关注者）
    $followed_id = $_POST["thefollower"]; // 被关注的用户ID

    mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
    $stmt = $conn->prepare('INSERT INTO userfollow (thefollower, theuserid, followstatus) VALUES (?,?,?)');
    $followstatus = 1;
    $stmt->bind_param('sss', $follower_id, $followed_id, $followstatus);
    $stmt->execute();
    echo "<span>Followed!</span>";
    $stmt->close();

} else if(isset($_POST["submitUnfollow"])){
    $follower_id = $_POST["theuserid"];
    $followed_id = $_POST["thefollower"];

    mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
    // 简化DELETE语句，无需重复写表名
    $stmt = $conn->prepare('DELETE FROM userfollow WHERE thefollower = ? AND theuserid = ?');
    $stmt->bind_param('ss', $follower_id, $followed_id);
    $stmt->execute();
    echo "<span>Unfollowed!</span>";
    $stmt->close();
} else {
    echo "DID NOT WORK";
}
?>

关键修改：

• 用$follower_id和$followed_id明确变量含义，避免混淆
• 修正INSERT和DELETE操作的字段对应关系，确保关注者/被关注者ID匹配数据库字段
• 简化冗余的DELETE语句写法

2. 优化jQuery代码（合并事件，实现hover效果） #

合并重复的$(document).ready，并完成取消关注按钮的hover文本切换：

$(document).ready(function(){
    // 关注按钮点击事件
    $("#followbutton").click(function(e) {
        e.preventDefault();
        var theuserid = $('#theuserid').val();
        var thefollower = $('#thefollower').val();

        $.ajax({
            url: 'includes/followuser.inc.php',
            type: 'post',
            data: {'theuserid': theuserid, 'thefollower': thefollower, 'submitFollow': true},
            success: function(response){
                $('#followmessage').html(response);   
                $("#followmessage").show().delay(3000).fadeOut();
                $('#followbutton').hide();
                $('#unfollowbutton').show();
            }
        });
    });

    // 取消关注按钮点击事件
    $("#unfollowbutton").click(function(e) {
        e.preventDefault();
        var theuserid = $('#theuserid').val();
        var thefollower = $('#thefollower').val();

        $.ajax({
            url: 'includes/followuser.inc.php',
            type: 'post',
            data: {'theuserid': theuserid, 'thefollower': thefollower, 'submitUnfollow': true},
            success: function(response){
                $('#followmessage').html(response);   
                $("#followmessage").show().delay(3000).fadeOut();
                $('#unfollowbutton').hide();
                $('#followbutton').show();
            }
        });
    });

    // 取消关注按钮hover文本切换
    $("#unfollowbutton").hover(
        function(){
            $(this).find('span').text("Unfollow");
        }, 
        function(){
            $(this).find('span').text("Following");
        }
    );
});

关键修改：

• 合并两个$(document).ready，减少代码冗余
• 实现unfollowbutton的hover文本切换，操作内部<span>元素避免破坏原有结构

3. 修正profile.php的按钮初始状态逻辑 #

确保初始状态下，已关注时显示Following按钮，未关注时显示Follow按钮：

<?php
if(isset($_SESSION["userid"]) && $_SESSION["userid"] != $userthatisfollowed) {
?>
<form action="<?php echo htmlspecialchars("includes/followuser.inc.php");?>" id="followform" method="post">
    <?php
    // 假设$resulted是查询当前用户是否已关注该用户的结果集
    $is_followed = $resulted->num_rows > 0;
    ?>

    <!-- 已关注时显示的按钮 -->
    <button name="submitUnfollow" id="unfollowbutton" type="submit" style="<?php echo $is_followed ? 'display:block' : 'display:none'; ?>">
        <span>Following</span>
    </button>

    <!-- 未关注时显示的按钮 -->
    <button name="submitFollow" id="followbutton" type="submit" style="<?php echo $is_followed ? 'display:none' : 'display:block'; ?>">
        <span>Follow</span>
    </button>

    <div id='followmessage'></div>
    <input type="hidden" name="theuserid" id="theuserid" value="<?php echo $_SESSION["userid"] ?>">
    <input type="hidden" name="thefollower" id="thefollower" value="<?php echo $userthatisfollowed; ?>">
</form>
<?php
}
?>

关键修改：

• 明确按钮name属性为submitFollow和submitUnfollow，与Ajax传递的参数对应
• 根据$is_followed变量直接控制按钮初始显示状态，避免变量混淆
• 简化按钮文本赋值逻辑，确保初始文本正确

验证修复效果 #

1. 登录后访问其他用户的profile页面，初始按钮状态应正确显示（已关注则显示Following，未关注则显示Follow）
2. 点击Follow按钮，页面无刷新，弹出"Followed!"提示，按钮切换为Following
3. 鼠标悬停在Following按钮上，文本变为Unfollow，离开后恢复为Following
4. 点击Unfollow按钮，页面无刷新，弹出"Unfollowed!"提示，按钮切换为Follow

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