我想通过JS的POST发送一个FORM DATA.但是表单的所有输入元素都是空的

Question

我制作了一个表单标记和脚本。我试图发送POST。但是，表单数据为空。我不知道为什么。

HTML代码

<form id = "form" action="sample.php" method="POST">
<input name="mytext" type="text">
<input id="submit-button" type="submit" value="submit">
</form>

JavaScript代码

const form = document.getElementById("form")
const submitButton = document.getElementById("submit-button")
submitButton.onclick = () => {
event.preventDefault()
var request = document.createElement('input');
const formData = new FormData(form)
const action = form.getAttribute("action")
const options = {
method: 'POST',
body: formData,
}
fetch(action, options).then((e) => {
if (e.status === 200) {
alert("sent")
return
}
alert("fail")
})
}

PHP代码

$text= $_POST['mytext'];

我把console.log(formData(放在fetch(action，options(中。然后((e(=>｛｝。据我所见，formData是空的。在此处输入图像描述

我试着用

const f1 = document.getElementById('mytext');
const fd = new FormData(f1);

而不是

const form = document.getElementById("form")

然而，这个错误发生了。

未捕获类型错误：构造"FormData"失败：参数1的类型不是"HTMLFormElement"。在submitButton.onclick(test.php：213:14(

Answer 1

您忘记将event.preventDefault()添加到函数中，如果不添加，表单将导致页面重新加载，并且不会发送任何数据。