如标题所示，我试图通过HTML表单捕获用户的输入，并在提交时将其数据发布到API。
我可以成功进行POST并从API获得响应，但是没有附加任何表单数据（至少我认为这是持续存在的问题）。
由于这是惯例，因此我使用了在https://reqres.in/网上找到的免费发布API 。感谢所有帮助！
的HTML
<form id="myForm">
<label for="myName">Send me your name:</label>
<input id="myName" name="name" value="Alex">
<br>
<label for="userId">your id:</label>
<input id="userId" name="id" value="123">
<br>
<label for="myJob">your name:</label>
<input id="myJob" name="job" value="Web Dev">
<br>
<input id="postSubmit" type="submit" value="Send Me!">
</form>
这是我的JavaScript
const thisForm = document.getElementById('myForm');
thisForm.addEventListener('submit', async function (e) {
e.preventDefault();
let response = await fetch('https://reqres.in/api/users', {
method: 'POST',
body: new FormData(thisForm)
});
let result = await response.json();
alert(result.message)
console.log(result)
});
您的表单数据已添加到POST请求中，但是以reqres.in忽略格式添加。reqres.in如果它是有效的JSON字符串，则似乎仅处理请求正文。
当您发送的请求的主体设置为时，new FormData()浏览器会将Content-Type: multipart/form-data标头添加到请求中。reqres.in忽略多部分表单数据。该reqres.inAPI应该响应一条错误消息，以通知您您使用了API无法正确处理的Content-Type，而不是忽略您提供的主体，创建记录并以进行响应201 created。这绝对是他们的失败。
这是使用的有效代码段Content-Type: application/json。但是请注意，这不是将FormData对象转换为相应JSON的可靠方法，并且Object.fromEntries仅在非常现代的浏览器中可用：
const thisForm = document.getElementById('myForm');
thisForm.addEventListener('submit', async function (e) {
e.preventDefault();
const formData = new FormData(thisForm).entries()
const response = await fetch('https://reqres.in/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(Object.fromEntries(formData))
});
const result = await response.json();
console.log(result)
});<form id="myForm">
<label for="myName">Send me your name:</label>
<input id="myName" name="name" value="Alex">
<br>
<label for="userId">your id:</label>
<input id="userId" name="id" value="123">
<br>
<label for="myJob">your name:</label>
<input id="myJob" name="job" value="Web Dev">
<br>
<input id="postSubmit" type="submit" value="Send Me!">
</form>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句