Javascript 使用fetchapi发送表单数据

我试图使用FetchAPI从表单中检索数据并将其发送出去，但我收到的电子邮件是空的。响应似乎成功，但没有发送数据。我做错了什么

这是我的JS代码和php/html代码片段（如果相关的话）

（函数（）{
const submitBtn=document.querySelector（“#submit”）；
submitBtn.addEventListener（'click'，postData）；
函数postData（e）{
e、 预防默认值（）；
const first_name=document.querySelector（'#name'）.value；
const email=document.querySelector（“#email”）.value；
const message=document.querySelector（'#msg'）.value；
fetch（'process.php'{
方法：“POST”，
body:JSON.stringify（{first_name:first_name，email:email，message:message}）
}).然后（功能（响应）{
控制台日志（响应）；
返回response.json（）；
}).then（功能（数据）{
控制台日志（数据）；
//成功
});
}
})();

---

PHP不理解JSON请求主体。因此，当发送JSON文本时，PHP不会自动解析JSON并将数据放入全局$\u POST变量

另外，当正文仅为文本时，

fetch（）

将使用默认的mime text/plain作为内容类型。因此，即使您将

body

设置为

x-www-form-urlencoded

格式的数据，它也不会将请求头设置为正确的头，PHP也不会正确解析它

您必须手动获取发送的数据并自己解析：

<?php

$dataString = file_get_contents('php://input');
$data = json_decode($dataString);
echo $data->first_name;

甚至创建一个

FormData

对象，让fetch自动检测要使用的正确内容类型：

var data = new FormData();
data.append('first_name','name');
data.append('email','email@example.com');

fetch('/', {
  method: 'POST',
  body: data
})

var data = new FormData();
data.append('first_name','name');
data.append('email','email@example.com');

fetch('/', {
  method: 'POST',
  body: data
})