为什么 PHP 无法从 Js FormData fetch 中获取 $_POST 数据？答案

【问题标题】：Why PHP couldn't get $_POST data from Js FormData fetch?为什么 PHP 无法从 Js FormData fetch 中获取 $_POST 数据？
【发布时间】：2019-09-11 07:36:15
【问题描述】：

我想将 JSON 数据（在本例中为客户端时间戳）发送到我的服务器。但是，我的代码似乎没有按预期工作。

我的想法是使用 fetch 将 FormData（其中包含输入以 JSON 作为值）发送到 PHP。在服务器端，PHP 会处理带有$_POST 的表单并将 JSON 字符串返回给我。

我正在使用具有 PHP 7.0 的免费主机服务进行测试。

以下所有代码都在同一个文件（404.php）中：

var now = new Date();

var pkg = JSON.stringify({
    ts: now.getTime(),
    tz: now.getTimezoneOffset() / -60
})

var form = new FormData();
form.set('json', pkg);

console.log(form.has('json')) // true
console.log(form.values().next()) // return and obj contain JSON string

fetch('/404.php', {
    method: 'POST',
    body: form
});

$json = null;
if(isset($_POST['json'])) $json = json_decode($_POST['json']);

var_dump($_POST); //Result: array(0) { }

如您所见，var_dump 的输出是一个空数组。但我希望看到的是带有 JSON 字符串的输出。

我试过另一种方法，就是这个fetch-api-json-php，但也没用。我在 Internet 上找到的所有资源通常都是关于经典 AJAX，而不是 fetch API。而且其中大多数仅适用于客户端，PHP/服务器端我找不到太多。

【问题讨论】：

PHP端的$_POST包含什么？你有没有 var_dump'd 的 $_POST 的内容？
是的，它返回空数组。
对不起。你张贴了。所以这不是 PHP 方面，而是 JS 方面。我假设您需要在fetch() 中发送form.values() 而不是form。为确保发送了正确的数据，请在开发人员控制台的网络选项卡中检查正确的数据是否已传输到脚本。如果在请求正文中没有发送任何内容，PHP 将无法使用
您也可以简化操作，将body: form.values() 替换为body : {"json" : PKG} 并跳过所有表单业务。
我不这么认为，我使用的fetch code是网上常见的。但当然，一切都值得一试。然而，什么都没有改变......

标签： php fetch-api form-data

【解决方案1】：

您可以尝试在本地机器上运行此代码吗？

创建一个文件名 55788817.php 并粘贴此代码并运行。

  <?php
  if (isset($_POST) && !empty($_POST)) {
    $json = null;
    if(isset($_POST['json'])) $json = json_decode($_POST['json']);

    var_dump($_POST); //Result: array(1) { ["json"]=> string(29) "{"ts":1555915560755,"tz":5.5}" }
    exit;
  }
  ?>
  <!DOCTYPE html>
  <html>
  <head>
    <title></title>
  </head>
  <body>
    <button type="button" id="registerButton">Click Me!</button>
    <script>
      var now = new Date();

      var pkg = JSON.stringify({
          ts: now.getTime(),
          tz: now.getTimezoneOffset() / -60
      })

      var form = new FormData();
      form.append('json', pkg);

      console.log(form.has('json')) // true
      console.log(form.values().next()) // return and obj contain JSON string
      fetch('./55788817.php', {
          method: 'POST',
          body: form
      });
    </script>
  </body>
  </html>

【讨论】：

我必须在本地主机上运行它吗？因为我没有使用我的电脑（实际上是借用的）所以我无法设置本地主机。但我已将您的脚本添加到我的共享主机并尝试过。单击按钮后我应该期待什么，因为它似乎没有返回任何内容。
检查 Chrome > 检查 > 网络选项卡并查看上述文件的响应。
结果如下：screenshot。我开始认为这是服务器的错。
嗯，你在 fetch 方法中检查请求 URL 了吗？是正确的路径？如果您认为我的回答有帮助，请将此回答标记为有用，谢谢。
它在同一个文件上，所以它可能是错误的 url。好的，现在将标记此答案。

【解决方案2】：

这对我有用：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
    var pkg = '{"test":"data"}';
    var formData = new FormData();
    formData.set('json', pkg);

    fetch('./404.php', {
      method: 'POST',
      body: formData
    });
</script>
</head>
<body>

</body>
</html>

PHP：

<?php
$json = null;
if(isset($_POST['json'])) 
    $json = json_decode($_POST['json']);

var_dump($_POST, $json); 

// Result: array(1) { ["json"]=> string(15) "{"test":"data"}" } object(stdClass)#1 (1) { ["test"]=> string(4) "data" } 

?>

【讨论】：

它对我不起作用。即使我像你一样设置pkg 一个纯字符串值。它仍然为$json 返回一个null 值。