使用Fetch API将JS屏幕宽度传至PHP时var_dump返回Null的问题

核心问题 #

你当前的代码有三个关键问题导致拿不到正确数据：

1. 首次加载的空请求：页面第一次加载时，PHP代码就会执行，此时还没有发送任何Fetch请求，php://input是空内容，json_decode后自然返回null，页面上显示的var_dump结果是这次空请求的输出。
2. 请求响应未处理：当ResizeObserver触发Fetch请求时，PHP会重新执行并拿到正确的JSON数据，但此时返回的是整个页面的HTML内容，而你没有处理Fetch的响应，所以看不到这次请求的正确结果。
3. 无效的判断条件：isset($_POST)永远为true，因为$_POST是PHP的超全局数组，即使为空也始终存在，这个判断起不到筛选请求的作用。

修改后的完整代码 #

PHP部分（index.php）

<?php
// 只处理POST类型的JSON请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && strpos($_SERVER['CONTENT_TYPE'], 'application/json') !== false) {
    $data = file_get_contents("php://input");
    $clientsize = json_decode($data, true);
    
    // 这里可以添加你的服务器端调整逻辑
    var_dump($clientsize);
    
    // 终止输出，避免返回后续HTML内容
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>API</title>
</head>
<body>
<script>
// 添加防抖，避免窗口resize时频繁发送请求
let debounceTimer;
const resizeobserver = new ResizeObserver(entries => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    for (const entry of entries) {
      let width = entry.borderBoxSize?.[0].inlineSize;

      if (typeof width === 'number' && width !== 0) {
        // 修正变量名拼写错误：clientWith → clientWidth
        let clientWidth = {"width":`${width}`};

        fetch("index.php", {
          method:"POST",
          headers:{ 
              "Content-Type":"application/json; charset=utf-8"
          },
          body:JSON.stringify(clientWidth)
        })
        // 处理服务器响应，在控制台查看结果
        .then(response => response.text())
        .then(result => {
            console.log("服务器返回数据:", result);
        })
        .catch(error => {
            console.error("请求失败:", error);
        });
      }
    }
  }, 200); // 200ms防抖间隔，可根据需求调整
});
resizeobserver.observe(document.body);
</script>
</body>
</html>

关键调整说明 #

• 请求筛选：通过$_SERVER['REQUEST_METHOD']和CONTENT_TYPE判断是否为JSON类型的POST请求，处理完后用exit终止输出，避免返回HTML内容。
• 防抖处理：添加定时器延迟发送请求，避免窗口 resize 时频繁触发Fetch，减轻服务器压力。
• 响应处理：在Fetch中添加.then回调，在浏览器控制台查看服务器返回的正确数据。
• 变量名修正：把clientWith改为clientWidth，修正拼写错误。

验证方式 #

打开浏览器的开发者工具（F12），切换到控制台，调整窗口大小，就能看到服务器返回的var_dump结果，此时$clientsize会正确显示客户端宽度数据。

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