滚动触发JS并向PHP记录事件的Ajax解决方案求助

原代码问题分析 #

你之前的代码核心错误是PHP在服务器端执行，无法直接获取客户端的window.scrollY变量。PHP代码在页面发送给浏览器前就已经运行，根本拿不到用户的滚动状态，所以那个PHP里的if判断逻辑完全不成立，导致页面加载就弹出错误提示。

可行的Ajax解决方案 #

需要分成前端JS（负责检测滚动）和后端PHP（负责接收数据并存入数据库）两部分实现，同时确保只触发一次。

1. 前端修改（header.php中的代码） #

替换原有的JS和PHP判断逻辑，改为监听滚动事件，达到阈值后发送Ajax请求：

<?php
echo '
<script type="text/javascript">
// 标记是否已触发过请求，避免重复提交
let hasTriggered = false;
const scrollThreshold = 400;

window.onscroll = function() {
    // 仅当滚动超过阈值且未触发过请求时执行
    if (window.scrollY >= scrollThreshold && !hasTriggered) {
        hasTriggered = true;
        alert("Javascript: scroll> 400 just occured!");
        
        // 发送Ajax请求到后端
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "save_scroll_data.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // 传递当前滚动深度数据
        const postData = "scroll_depth=" + window.scrollY;
        
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log("滚动数据提交成功：", xhr.responseText);
            } else {
                console.error("提交失败：", xhr.statusText);
            }
        };
        
        xhr.onerror = function() {
            console.error("请求发送出错");
        };
        
        xhr.send(postData);
    }
};
</script>';
?>

2. 后端处理文件（save_scroll_data.php） #

新建这个文件，负责接收Ajax请求并将数据插入数据库：

<?php
// 替换为你的数据库连接信息
$dbHost = "localhost";
$dbUser = "你的数据库用户名";
$dbPass = "你的数据库密码";
$dbName = "你的数据库名";

// 建立数据库连接
$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
if (!$conn) {
    die("数据库连接失败：" . mysqli_connect_error());
}

// 获取前端传递的滚动深度，做安全处理
$scrollDepth = isset($_POST['scroll_depth']) ? intval($_POST['scroll_depth']) : 0;

// 预处理SQL，防止注入
$stmt = mysqli_prepare($conn, "INSERT INTO scroll_events (scroll_depth, created_at) VALUES (?, NOW())");
mysqli_stmt_bind_param($stmt, "i", $scrollDepth);

// 执行插入
if (mysqli_stmt_execute($stmt)) {
    echo "滚动深度已成功存入数据库";
} else {
    echo "存入失败：" . mysqli_stmt_error($stmt);
}

// 关闭连接
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

3. 补充说明 #

• 防止重复触发：前端用hasTriggered变量标记已请求过，如果需要用户刷新页面后重新触发，可以改用localStorage存储标记：

  // 初始化标记，读取本地存储
  let hasTriggered = localStorage.getItem('scrollTriggered') === 'true';
  
  // 触发后写入本地存储
  hasTriggered = true;
  localStorage.setItem('scrollTriggered', 'true');
  

• 数据库表准备：需要提前创建存储滚动数据的表，示例SQL：

  CREATE TABLE scroll_events (
      id INT AUTO_INCREMENT PRIMARY KEY,
      scroll_depth INT NOT NULL COMMENT '滚动深度（像素）',
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '触发时间'
  );
  

• 安全注意：后端必须用预处理语句处理SQL，避免SQL注入风险；上线后关闭PHP的错误显示。

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