使用 Fetch API 将数据发送到 PHP 服务器（首选 POST 方法和 JSON）

Posted 2023-03-14

【中文标题】使用 Fetch API 将数据发送到 PHP 服务器（首选 POST 方法和 JSON）

【英文标题】：Sending data to PHP server with Fetch API (POST method and JSON preferred)

【发布时间】：2020-02-16 05:37:05

【问题描述】：

我是第一次尝试 Fetch API，但在将 POST 数据发送到 php 服务器时遇到问题。

我正在远离$.ajax 并尝试使用纯 javascript 解决方案与不同的服务器进行通信（有时是本地的，有时不是）。现在我正在尝试理解 Fetch API，即使它简单直观，我也偶然发现了一个奇怪且出乎意料的问题：

我无法将 JSON 帖子发送到 PHP 服务器

我可以将表单数据发布到本地 PHP

我无法将表单数据发布到 WEB URL PHP

我可以（显然）从以上所有内容中检索数据，但奇怪的是什么都没有到达。 通过$_SERVER['REQUEST_METHOD']，我可以看到，当使用本地路径时，我得到了“POST”，但当使用WEB URL 时，由于某种我不明白的原因，它在GET 中发生了变化。

url="/";
url="www.something.com";
fetch(url, 
    method: 'POST',
    body: JSON.stringify(
        test: "toast",
    )
)
.then(function(response) 
    return response.text();
)
.then(function(data) 
    console.log(data);
);

我只希望以可靠和清晰的方式发送和接收数据。没有 jquery，没有库等。 我只想发送一个JSON "test":"toast" 并在检查$_POST var 时在PHP 文件中找到它。

更新

似乎本地和网络网址的问题在于这个差异：www.something.com/test => www.something.com/test/index.php。 由于某种原因没有 index.php，它拒绝了 POST 数据（但无论如何都要读取回显信息）。但是关于 JSON 的问题仍然存在。

我无法将 JSON 帖子发送到 PHP

我可以将表单数据发布到 PHP

更新

我发现 $_POST 和 $_GET 不适用于 Fetch API。您必须使用 php://input 将所有数据发送到服务器。

不知道为什么。有更好的解决方案吗？为什么ajax和XMLHttpRequest没有这种问题？

注意：如果你想让数据被识别为 json，你必须用一个 header 来指定它，即使这从来没有被请求过，为什么现在呢？ Fetch API 是否遗漏了什么？

header('Content-Type: application/json');

$test=json_decode(file_get_contents("php://input"));
//some code
echo json_encode($test);

【问题讨论】：

我不确定。但我尝试了你的代码，它对我来说效果很好。也许您可以重新检查您尝试将数据发送到的 URL。

您尝试过使用 JSON 吗？我刚刚更新了

【参考方案1】：

Fetch API 有两种使用方式： 一个>

let response = await fetch(url,[Options]);

if (response.ok)  // if HTTP-status is 200-299
  // get the response body (the method explained below)
  let json = await response.json();
 else 
  alert("HTTP-Error: " + response.status);

第二种方式是使用纯promise语法：

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

现在让我们谈谈选项和数据： 您的数据必须是这样的 JavaScript 对象：

      let data = 
        test: "toast",
      ;

然后你可以像这样配置你的标题：

let headers: 
       "Content-Type": "application/json"
      
  ;

最后像这样使用 fetch：

let response = await fetch(url, 
        method: "POST",
        headers:headers,
        body: JSON.stringify(data)
      );

我认为您的问题是使用 FormData 而不是字符串化的 JavaScript 对象

【讨论】：

谢谢你，很好的解释！但不幸的是，它与我以前的尝试有同样的问题......我搜索了很多文章，但我找不到为什么会出现这种问题:(关于 FormData 和 JSON，我发现出于某种原因在 php 上使用 Fetch API ，这是唯一的方法。而且它有效！（就像你的例子一样）但仅限于本地......

更新：似乎网络网址的问题在于这种差异：[link](www.something.com/test) => [link](www.something.com/test/index .php）。由于某种原因没有 index.php，它拒绝了 POST 数据（但无论如何都要读取回显信息）。但是关于 JSON 的问题仍然存在。

@Andrea 我在获取设置中找到了formData 和mode: 'no-cors' 的解决方案。 Check this answer