javascript - 如何在提交侦听器上传递表单数据,以便 axios 可以发布表单数据?
问题描述
我有如下表格。
<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>
可以有不止一种带有“comment -post”类的表单。我想在表单提交上添加事件侦听器,以便请求类似于 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);
})
})
我的问题是如何提交表单数据以及我的 axios 请求。目前,没有发送表单数据。
我尝试了以下(已编辑),
function(e) {
e.preventDefault()
const formData = new FormData(e.target)
axios
.post(e.target.action, formData)
.then(res=>{
console.log(res)
})
.catch(console.error);
})
在节点 js express 服务器端,我正在对接收到的对象进行控制台,以查看数据是否已实际传递。
router.post('/comment/:post_id/', comment );
const comment = (req, res) => {
console.log(req.body)
res.json(req.body);
}
我在 req.body console.log 上没有看到“评论”
解决方案
您需要使用事件的目标生成表单数据。所以你应该这样做:
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);
})
})
此外,在您的 html 中将 enctype 设置为表单数据。所以你将拥有:
<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>
如果您想检查他们是否键入/配对您的表单数据是否真的存在。您可以在生成表单数据后执行以下操作:
for (let pair of formData.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
推荐阅读
- matlab - 从数据库构建新矩阵时如何避免Matlab中的for循环
- python - 计算每列的不同值,返回数据框,并对值进行排序
- c# - 平滑不同幅度的随机噪声
- c++ - 用自动生成的值初始化 C++ 向量的最短方法
- javascript - 如何根据 scolling 更改图像?
- python - python(selenium)mac找不到模块
- android - 从图库中选择图像的对话框
- xtext - xtext 和 xtend « 标点符号,我如何得到它?
- r - rbind 具有通用 ID 的数据帧行
- javascript - Electron - 如何从 Main 向多个 Renderer 共享单个 Promise 解决方案?