Question

我的表单如下。

<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上没有看到“评论”

Answer 1

您需要使用事件的目标生成表单数据。所以你应该这样做：

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]); 
}

如何在提交侦听器上传递表单数据，以便axios可以发布表单数据？

1 个答案: