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

Question

我第一次尝试 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"}并在检查var时在PHP文件中找到它$_POST。

更新

看来本地和网络网址的问题在于这个差异：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，则必须使用标头指定它，即使从未请求过，为什么现在呢？Fetch API 是否缺少某些内容？

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

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

Answer 1

我希望有人能找到这个答案。我正在使用 Codeigniter 3.1.11，在得到朋友的帮助后我找到了答案。

控制器

class YourController extends CI_Controller
{
    public function yourMethod() {

        // THIS CODE IS A MUST!
        $input = json_decode(file_get_contents('php://input'), true);

        // You get the data you sent via FETCH
        var_dump($this->input->post('testdata'));
    }
}

获取帖子 JavaScript

let postData = new FormData();
postData.append('testdata', 123);
                            
fetch('http://localhost/your-app-name/yourcontroller/yourMethod', {
    method: 'POST',
    mode: 'no-cors',
    headers: {
        "Content-Type": "application/json"
    },
    body: postData
}).then((res) => {
    console.log(res);
    }).catch(console.log);

要查看使用 Fetch 发送或获取的数据的预览，您可以检查，转到“网络”选项卡，在“名称”表中，单击您的方法，然后转到“预览”选项卡。在预览中您可以看到 123。