使用sapper模板,我在netlify上部署了我的应用程序。我想将netlify表单与sapper集成在一起,所以我使用了docs表单结构。
<form name="contact" method="POST" data-netlify="true">
<p>
<label>Name<input type="text" bind:value={$user.name} /></label>
</p>
<p>
<label>E-mail<input type="text" bind:value={$user.email} /></label>
</p>
<p>
<label>Telephone<input type="text" bind:value={$user.phone} /></label>
</p>
<input type="hidden" name="form-name" value="contact" />
<button on:submit|preventDefault={submitForm} type="submit">Reach out</button>
</form>
有了这个,表单在提交时被发送到netlify,但是它是空的。因此,以文档中的示例为例,我尝试创建自己的提取后请求
let submitForm =(event)=>{
let formdata = new FormData();
formdata.append('name',$user.name);
formdata.append('email',$user.email);
formdata.append('telephone',$user.telephone);
fetch("/contact/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: formdata,
})
.then(() => alert("Success!"))
.catch(error => alert(error));
event.preventDefault();
}
同样,在我的路线中,我使用导出POST函数添加了js文件。
export async function post(req, res, next) {
/* Initializes */
res.setHeader('Content-Type', 'application/json')
/* Retrieves the data */
var data = req.body
/* Returns the result */
return res.end(JSON.stringify(data))
}
无论我做什么,当我尝试提交表单时,我总是会立即收到404。我尝试在提取中使用不同的URL,我尝试在js文件中进行实际发布,但没有进行任何操作。互联网上似乎没有其他人与这个问题有关,请帮忙!谢谢!
问题在于这些值没有用引号引起来。我只是使用es6 backdash语法对它们进行了转换,它确实有效!
formdata.append('name',`${user.name}`);
formdata.append('email',`${user.email}`);
formdata.append('telephone',`${user.telephone}`);