我正在尝试使用Fetch API从表单中检索数据并将其邮寄,但我收到的电子邮件是空的。响应似乎是成功的,但没有发送数据。我做错了什么?
这是我的JS代码和我的php / html片段(如果相关)
(function() {
const submitBtn = document.querySelector('#submit');
submitBtn.addEventListener('click', postData);
function postData(e) {
e.preventDefault();
const first_name = document.querySelector('#name').value;
const email = document.querySelector('#email').value;
const message = document.querySelector('#msg').value;
fetch('process.php', {
method: 'POST',
body: JSON.stringify({first_name:first_name, email:email, message:message})
}).then(function (response) {
console.log(response);
return response.json();
}).then(function(data) {
console.log(data);
// Success
});
}
})();
<!-- begin snippet: js hide: false console: true babel: false -->
<?php
$to = "example@mail.com";
$first_name = $_POST['first_name'];
$from = $_POST['email'];
$message = $_POST['message'];
$subject = "Test Email";
$message = $first_name . " sent a message:" . "\n\n" . $message;
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);
?>
<form action="" method="post" class="contact__form form" id="contact-form">
<input type="text" class="form__input" placeholder="Your Name" id="name" name="first_name" required="">
<input type="email" class="form__input" placeholder="Email address" id="email" name="email" required="">
<textarea id="msg" placeholder="Message" class="form__textarea" name="message"/></textarea>
<input class="btn" type="submit" name="submit" value="Send" id="submit"/>
</form>
答案 0 :(得分:5)
PHP不了解JSON请求主体。因此,当JSON文本发送给它时,PHP不会自动解析JSON并将数据放入全局$ _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;
通过显式设置内容类型标头并传递正确格式化的application/x-www-form-urlencoded
,将数据作为不同的内容类型发送,即body
:
fetch('/', {
method: 'POST',
headers:{
"content-type":"application/x-www-form-urlencoded"
},
body: "first_name=name&email=email@example.com"
})
甚至可以创建一个FormData
对象,让fetch自动检测要使用的正确内容类型:
var data = new FormData();
data.append('first_name','name');
data.append('email','email@example.com');
fetch('/', {
method: 'POST',
body: data
})