如何使用JavaScript触发PHP文件实现无刷新点赞功能

完全可以通过原生JavaScript发起异步请求实现无刷新点赞，不需要引入额外框架，完整实现步骤如下：

1. 修正原有HTML的语法问题 #

你原来的按钮代码存在标签不匹配问题（<input>开头却用</button>闭合），调整后加上自定义属性存储视频ID、单独用标签包裹点赞数方便后续动态更新：

<button type="button" id="like_button" data-id="<?php echo $getVideo['id']; ?>">
  <img src="images/like.png" alt="点赞图标">
  <span class="like-count"><?php echo $getVideo["likes"];?></span>
</button>

• 用data-id属性存储当前视频的唯一ID，供JS读取传给后端
• 用<span>单独包裹点赞数字，后续异步请求成功后直接更新这个标签的内容即可

2. 调整后端PHP接口返回格式 #

你原有的OOP逻辑不需要改动，只需要在接口执行完点赞操作后，把最新的点赞数以JSON格式返回给前端即可：

<?php 
require_once "data_inc/database.php";

$like = new videos();
// 原有点赞逻辑保持不变，如果likeButton方法没有返回值，修改该方法返回更新后的点赞总数即可
$newLikeCount = $like->likeButton($_GET["id"]);

// 设置响应头为JSON格式，返回结果给前端
header('Content-Type: application/json');
echo json_encode([
  'code' => 0, // 0代表请求成功，非0代表失败
  'likes' => $newLikeCount
]);
exit;
?>

如果不想修改likeButton方法的内部逻辑，也可以在调用完该方法后，单独查询一次当前视频的最新点赞数，再放到返回结果里，完全不影响原有类的封装。

3. 编写JavaScript异步交互逻辑 #

用原生fetchAPI发起异步请求即可，不需要加载jQuery等第三方库，代码如下：

document.addEventListener('DOMContentLoaded', () => {
  const likeBtn = document.getElementById('like_button');
  const countNode = likeBtn.querySelector('.like-count');
  // 提交锁，防止用户快速连续点击重复发起请求
  let submitting = false;

  likeBtn.addEventListener('click', async () => {
    if (submitting) return;
    submitting = true;
    const videoId = likeBtn.dataset.id;

    try {
      const res = await fetch(`like_button.php?id=${videoId}`);
      const data = await res.json();
      if (data.code === 0) {
        // 更新页面点赞数
        countNode.textContent = data.likes;
        // 可自行添加点赞成功的视觉反馈，比如切换图标高亮样式
        likeBtn.classList.add('has-liked');
      } else {
        alert('点赞失败，请重试');
      }
    } catch (e) {
      alert('网络异常，请稍后再试');
    } finally {
      submitting = false;
    }
  })
})

注意事项 #

• 提交锁是必要配置，高并发场景下可以过滤掉大量无效重复请求，降低服务器压力
• 如果需要做“用户已点赞不可重复点”的限制，只需要在PHP接口里加用户登录态、点赞记录校验，返回对应错误码即可，前端不需要大改
• 整个实现完全兼容原有OOP PHP的业务结构，不需要重构已有代码，只是在接口输出层加了JSON返回逻辑
• 如果需要兼容IE浏览器，把fetch写法换成XMLHttpRequest即可，逻辑完全一致

内容的提问来源于stack exchange，提问作者Super David Gangster