页面重载后点赞按钮保持已点击状态且点赞数异常增加如何解决？

核心原因 #

你当前的问题核心是混淆了服务端PHP代码和客户端JS代码的执行时机：PHP代码在页面渲染的服务端阶段就会直接执行，和它所处的JS代码位置无关。你将数据库点赞数+1的PHP逻辑写在了JS点击事件回调中，等于每次页面加载时就会自动执行一次点赞数更新，完全不需要用户点击按钮，这就是刷新页面点赞数额外上涨的原因。

具体修复步骤 #

• 第一步：删除JS点击事件中内嵌的PHP更新逻辑
  移除点击回调中的这段PHP代码：

  <?php
  $like_query = "UPDATE posts SET post_likes_count=post_likes_count +1 WHERE post_id=$link_post_id";
  $send_query2 = mysqli_query($connection, $like_query);
  
  $query2 = "SELECT * FROM posts WHERE post_id=$link_post_id";
  $like_post_query = mysqli_query($connection, $query2);
  ?>
  

• 第二步：新增独立的后端点赞接口
  新建like.php文件专门处理点赞请求，避免页面加载时自动执行更新逻辑：

  <?php
  // 引入数据库连接文件
  include '你的数据库连接文件路径.php';
  $post_id = intval($_POST['post_id']);
  if ($post_id <= 0) {
      echo json_encode(['status' => 'fail', 'msg' => '无效文章ID']);
      exit;
  }
  // 更新点赞数，使用预处理语句避免SQL注入
  $update_sql = "UPDATE posts SET post_likes_count = post_likes_count + 1 WHERE post_id = ?";
  $stmt = mysqli_prepare($connection, $update_sql);
  mysqli_stmt_bind_param($stmt, 'i', $post_id);
  mysqli_stmt_execute($stmt);
  // 查询最新点赞数返回
  $select_sql = "SELECT post_likes_count FROM posts WHERE post_id = ?";
  $stmt = mysqli_prepare($connection, $select_sql);
  mysqli_stmt_bind_param($stmt, 'i', $post_id);
  mysqli_stmt_execute($stmt);
  $res = mysqli_stmt_get_result($stmt);
  $likes = mysqli_fetch_assoc($res)['post_likes_count'];
  echo json_encode(['status' => 'success', 'likes' => $likes]);
  exit;
  ?>
  

• 第三步：修改前端点击逻辑，通过AJAX调用点赞接口
  只有用户真实点击按钮时才触发点赞更新：

  if (isLiked === false) {                                                        
      likebtn.addEventListener('click', function() {
          // 发送AJAX请求
          const xhr = new XMLHttpRequest();
          xhr.open('POST', 'like.php');
          xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
          xhr.onload = function() {
              const res = JSON.parse(xhr.responseText);
              if (res.status === 'success') {
                  // 更新页面点赞数
                  input.value = res.likes;
                  input.style.color = "#a1c4fd";
                  // 存储点赞标记
                  likedIDhistory.push(likedID);
                  localStorage.setItem("arrayOfLikedPosts", JSON.stringify(likedIDhistory));
                  // 禁用按钮
                  likebtn.disabled = true;
                  likebtn.style.opacity = 0.5;
              }
          }
          xhr.send(`post_id=${likedID}`);
      });
  } else {
      // 页面加载时如果已经点赞，同步按钮状态和颜色
      input.style.color = "#a1c4fd";
      likebtn.disabled = true;
      likebtn.style.opacity = 0.5;
  }
  

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