如何在PHP页面的视频href链接旁添加点击计数器（Ajax实现）

核心问题梳理 #

• 前端Ajax拼接错误：xmlhttp.open("GET","addClick.php?id="id,true) 缺少字符串拼接符+，导致URL格式错误，无法正确传递ID。
• 重复ID冲突：所有计数器<div>都使用id="res"，无法精准定位单个视频的计数器进行更新。
• 后端预处理语句未绑定参数：UPDATE语句使用了占位符?，但未传入实际ID参数，导致更新操作失效。
• 后端返回内容无效：当前后端返回提示文本，无法直接用于前端更新计数器显示。

修复后的完整代码 #

home.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "vc";

$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检查数据库连接
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}
?>
<div id="anim">
<?php
$sql = "SELECT * FROM counter";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
  while ($row= mysqli_fetch_array($result)) {
    // 为每个计数器div设置唯一ID：res-视频ID
    echo "<a href='{$row['link']}' target='_blank' onclick='addClick({$row['id']})'>{$row['name']}</a>
          <div id='res-{$row['id']}'>{$row['counte']}</div><br>";
  }
} else {
  echo "0 results";
}
mysqli_close($conn);
?> 
</div>

<script>
function addClick(id) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 更新对应视频的计数器显示
      document.getElementById("res-" + id).innerHTML = this.responseText;
    }
  }
  // 修复URL拼接错误，添加+号连接字符串与ID变量
  xmlhttp.open("GET", "addClick.php?id=" + id, true);
  xmlhttp.send();
}
</script>

addClick.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "vc";

$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

// 验证并获取传入的ID参数
if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
  die("Invalid ID");
}
$id = intval($_GET['id']);

// 使用预处理语句执行更新，防止SQL注入
$sql = "UPDATE counter SET counte = counte + 1 WHERE id = ?";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, "i", $id); // 绑定整数类型的ID参数

if (mysqli_stmt_execute($stmt)) {
  // 更新成功后，查询当前最新的计数值并返回给前端
  $query = "SELECT counte FROM counter WHERE id = ?";
  $stmt_get = mysqli_prepare($conn, $query);
  mysqli_stmt_bind_param($stmt_get, "i", $id);
  mysqli_stmt_execute($stmt_get);
  mysqli_stmt_bind_result($stmt_get, $count);
  mysqli_stmt_fetch($stmt_get);
  echo $count;
} else {
  echo "Error: " . mysqli_stmt_error($stmt);
}

mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

修复说明 #

1. 前端URL拼接：通过添加+号完成字符串与变量的拼接，确保视频ID正确传递到后端接口。
2. 唯一ID绑定：每个计数器div使用res-视频ID作为唯一标识，点击后仅更新对应视频的计数，避免全局替换整个列表。
3. 后端安全处理：使用预处理语句绑定ID参数，有效防止SQL注入，同时确保更新语句正确执行。
4. 返回有效数据：后端更新完成后查询最新计数并返回纯数字，前端直接将返回值更新到对应位置，无需重新渲染整个列表，提升性能。

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