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

Posted 2023-02-23

【中文标题】如何在提交侦听器上传递表单数据，以便 axios 可以发布表单数据？

【英文标题】：How to pass form data on submit listener so that axios can post form data?

【发布时间】：2020-09-10 22:09:30

【问题描述】：

我有如下表格。

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

【参考方案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]); 

【讨论】：

在将数据发布到 api 时，我确实需要采取行动

对不起，我的错。我刚刚更正了它，因此您也可以从事件中获取操作。所以你动态获取网址

一切似乎都很好，但我无法在服务器端的 console.log 上看到“评论”数据。

如果需要在node js中处理表单数据。您可以使用 multer：github.com/expressjs/multer。此外，您可以将请求作为 json 发送，而不是使用表单数据。如：form.addEventListener('submit', (e) => e.preventDefault() axios .post(e.target.action, name: e.target.elements[0].name ) .then(res=> console.log(res) ) .catch(console.error); )