[英]How to pass form data on submit listener so that axios can post form data?
I have a form like the following.我有如下表格。
<form class="comment-post" method="POST" action="/api/v1/comment/<%= post._id %>" enctype="multipart/form-data>
<div class="comment-section">
<textarea rows="4" name="comment"></textarea>
<button type="submit" class="button">Submit</button>
</div>
</form>
There can be more than one form with class 'comment -post'. class 'comment -post' 可以有不止一种形式。 I would like to add event listener on form submit so that the request is ajax like, as in the following.
我想在表单提交上添加事件侦听器,以便请求是 ajax ,如下所示。
const commentPostForms = document.querySelectorAll('.comment-post')
commentPostForms.forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault()
axios
.post(this.action)
.then(res=>{
console.log(res)
})
.catch(console.error);
})
})
My question is how do I submit the form data along with my axios request.我的问题是如何提交表单数据以及我的 axios 请求。 Currently, no form data is being sent.
目前,没有发送表单数据。
I tried the following (edited),我尝试了以下(已编辑),
function(e) {
e.preventDefault()
const formData = new FormData(e.target)
axios
.post(e.target.action, formData)
.then(res=>{
console.log(res)
})
.catch(console.error);
})
On the node js express server side I am doing console of the received object to see if the data has been actually passed.在node js express服务器端我正在对收到的object做console,看数据是否真的传过了。
router.post('/comment/:post_id/', comment );
const comment = (req, res) => {
console.log(req.body)
res.json(req.body);
}
I do not see 'comment' on req.body console.log我在 req.body console.log 上没有看到“评论”
You need to generate the form data using the target of the event.您需要使用事件的目标生成表单数据。 So you should do:
所以你应该这样做:
const commentPostForms = document.querySelectorAll('.comment-post')
commentPostForms.forEach(form => {
form.addEventListener('submit', (e) => {
e.preventDefault()
const formData = new FormData(e.target);
axios
.post(e.target.action, formData)
.then(res=>{
console.log(res)
})
.catch(console.error);
})
})
Also, in your html set the enctype to form data.此外,在您的 html 中设置 enctype 以形成数据。 So you will have:
所以你将拥有:
<form class="comment-post" enctype="multipart/formdata" action="/api/v1/comment/<%= post._id %>">
<div class="comment-section">
<textarea rows="4" name="comment"></textarea>
<button type="submit" class="button">Submit</button>
</div>
</form>
If you want to check if they key/pair your form data is really there.如果您想检查他们是否键入/配对您的表单数据是否真的存在。 You can do after generating the form data:
您可以在生成表单数据后执行以下操作:
for (let pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.