jquery $.post() 可以成功发送数据，为何 fetch 却不行？

Question

php 后台用的这个来判断是否 post，来接收一个很简单的数据存到数据库。

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (@$_POST['action'] == 'send_data') {}

前端 post 发送 却只能用 jquery 来发送成功，用fetch 却不行，这是为何。。。

//jQuery ajax

        //jQuery ajax
        $.post('http://localhost/',
            {
                action: "send_data",
                talk_code: '11223344',
                cid: '27',
                token: "crx",
                content: '这是一条测试内容~~',
            },
            function (res) {
                console.log(res.status);
            }
        )

// fetch

        fetch("http://localhost/", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                action: "send_data",
                talk_code: '11223344',
                cid: '27',
                token: "crx",
                content: '这是一条测试内容~~',
            })
        }).then(res => res.text()).then(json => console.log(json))

到底是哪里出了问题，百思不得其解。。。

Answer 1

PHP 的 $_POST 超全局变量只能获取到 application/x-www-form-urlencoded、multipart/form-data 这两部分类型的表单数据，对于 JSON 及其他需要从 php://input 获取，并解析。
你也可以改造你的前端代码。

fetch('http://localhost/', {
  method: 'POST',
  headers: {
-    'Content-Type': 'application/json',
+    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
-  body: JSON.stringify({
+  body: qs.stringify({
    action: 'send_data',
    talk_code: '11223344',
    cid: '27',
    token: 'crx',
    content: '这是一条测试内容~~',
  })
}).then(res => res.text()).then(json => console.log(json))

注意第二处改变那里，你需要额外使用一个叫 qs 的包。

或者改变你的后端代码。

+ $input = json_decode(file_get_contents('php://input'), true) ?: [];

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
-    if (@$_POST['action'] == 'send_data') {}
+    if (@$input['action'] == 'send_data') {}

Answer 2

更改fetch 提交方式

  let formData = new FormData();
  formData.append("action", "send_data");
  formData.append("talk_code", "11223344");
  formData.append("cid", "27");
  formData.append("token", "crx");
  formData.append("content", "这是一条测试内容");
  fetch("http://localhost/", {
            method: "POST",
            body: formData
  }).then(res => res.text()).then(json => console.log(json))