英文:
How to fetch the POST method with formik using getform.io
问题
我用formik在我的作品集中制作了一个表单（https://alexpowelldev.com/），我试图将提交的数据发送到getform.io。但不知何故，在提交时控制台中出现了400错误，具体如下：
表单数据 {firstName: 'Alexander', email: 'john@yahoo.com', type: '', comment: 'test kjdfhsdkjfhakjsdfhisafbsdivuabvierbuib'}
错误信息：
POST https://getform.io/f/... 400
看起来有某种连接问题。以下是代码：
const formik = useFormik({
initialValues: {firstName:"",email:"",type:"",comment:""},
onSubmit: (values) => {
fetch("https://getform.io/f/...", {
method: "POST",
body: values,
headers: {
"Accept": "application/json",
},
})
.then(response => console.log(response))
.catch(error => console.log(error))
console.log('form data', values)
}
})
<form
onSubmit={formik.handleSubmit}
>
如有需要，我可以提供更多上下文信息。
英文:
I/ve made a form with formik on my portfolio (<https://alexpowelldev.com/>)that im trying to send the data being submitted to getform.io.
For some reason I'm getting a 400 error in the console when submitting which is as folllows:
form data {firstName: 'Alexander', email: 'john@yahoo.com', type: '', comment: 'test kjdfhsdkjfhakjsdfhisafbsdivuabvierbuib'}ContactMe.js:27
POST https://getform.io/f/... 400
onSubmit @ ContactMe.js:27
ContactMe.js:33 Response {type: 'cors', url: 'https://getform.io/f/...', redirected: false, status: 400, ok: false, …}
There seems to be some sort of disconnect. Here is the code:
const formik = useFormik({
initialValues: {firstName:"",email:"",type:"",comment:"" },
onSubmit: (values) => {
fetch("https://getform.io/f/...", {
method: "POST",
body: values,
headers: {
"Accept": "application/json",
},
})
.then(response => console.log(response))
.catch(error => console.log(error))
console.log('form data', values)
}
<form
onSubmit={formik.handleSubmit}
>
Any help would be much appreciated.I can add more context if needed.
edit* I found in the chrome dev tools this message: 
However you can see in my initialValues for formik that They all have unique names.
答案1
得分: 1
以下是翻译好的部分：
从 https://getform.io/ 首页的示例快速查看，它似乎期望请求主体采用 multipart/form-data 格式。
要实现这一点，创建一个 FormData 实例并添加你的表单数值：
onSubmit: async (values) => {
const body = new FormData();
Object.entries(values).forEach(([ key, val ]) => {
body.append(key, val);
});
const res = await fetch("https://getform.io/f/...", {
method: "POST",
headers: { accept: "application/json" },
body,
});
if (!res.ok) {
console.error(res.status, await res.text());
} else {
console.log(await res.json());
}
}
更进一步，它还支持 application/x-www-form-urlencoded...
fetch("https://getform.io/f/...", {
method: "POST",
headers: { accept: "application/json" },
body: new URLSearchParams(values),
})
甚至支持 application/json：
fetch("https://getform.io/f/...", {
method: "POST",
headers: {
accept: "application/json",
"content-type": "application/json",
},
body: JSON.stringify(values),
})
英文:
From a very quick look at the examples on the https://getform.io/ home page, it appears they expect request bodies in multipart/form-data format.
To provide this, create a FormData instance and add your form values
onSubmit: async (values) => {
const body = new FormData();
Object.entries(values).forEach(([ key, val ]) => {
body.append(key, val);
});
const res = await fetch("https://getform.io/f/...", {
method: "POST",
headers: { accept: "application/json" },
body,
});
if (!res.ok) {
console.error(res.status, await res.text());
} else {
console.log(await res.json());
}
}
Looking further, they also support application/x-www-form-urlencoded...
fetch("https://getform.io/f/...", {
method: "POST",
headers: { accept: "application/json" },
body: new URLSearchParams(values),
})
and even application/json
fetch("https://getform.io/f/...", {
method: "POST",
headers: {
accept: "application/json",
"content-type": "application/json",
},
body: JSON.stringify(values),
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论