有没有更好的方法来发送表单数据？答案

【问题标题】：Is there a better way to send the form data?有没有更好的方法来发送表单数据？
【发布时间】：2019-04-17 07:50:03
【问题描述】：

我尝试使用以下方法通过axios 发送我的表单数据。但是我想知道是否有更好的方式来发送表单数据，让我的代码看起来很标准，代码行数更少。

HTML 代码

<input type="text" class="forms__first" placeholder="First Name*" v-model="firstName">
        <input type="text" class="forms__last" placeholder="Last Name*" v-model="lastName">
        <input type="email" class="forms__email" placeholder="Email*" v-model="email">
        <input
          type="text"
          class="forms__number"
          placeholder="Phone Number (Optional)"
          v-model="number"
        >
        <input
          type="text"
          class="forms__add"
          placeholder="Address (e.g: Shankhamul, Kathmandu)"
          v-model="address"
        >

脚本代码

sendUserInfo () {
    axios
      .post('/formdata/store', {
        first_name: this.firstName,
        last_name: this.lastName,
        email: this.email,
        phone_no: this.number,
        address: this.address
      })
      .then(res => {
        alert('successfully posted')
      })
      .catch(err => {
        console.log(err)
      })

【问题讨论】：

您能否分享更多详细信息，this 来自哪里？你的表格是什么样的？请提供Minimal, Complete, and Verifiable 示例。有这样一个例子 - 我们可以以更好的方式帮助您。
我投票决定将此问题作为离题结束，因为它要求进行代码审查（因此这太宽泛/基于意见）。它可能会被调整为the code review stackexchange 的主题。
哦！我不知道那个社区。感谢分享。 @昆汀

标签： javascript vuejs2 axios

【解决方案1】：

首先，我建议将所有这些单独的数据模型嵌套在一个数据模型下，如下所示：

data() {
    return {
        user: {
            firstName: '',
            lastName: '',
            email: ''
       }
    }
}

这将允许您将 html 中的内容称为

<input type="text" class="forms__first" placeholder="First Name*" v-model="user.firstName">

但好处在于您的sendUserInfo 函数，您将在其中实现“我的代码看起来很标准，代码行数更少”的目标：

sendUserInfo () {
    axios
      .post('/formdata/store', this.user)

其次，如果您的代码正常工作，那么通过这个问题就没有真正的问题需要解决。然后，我建议您更彻底地查看 VueJS 官方指南，尤其是 Cookbook，以了解应该如何解决常见的编码挑战。这是Axios recipe。

编码愉快！

【讨论】：

【解决方案2】：

您可以使用 .serializeArray() 为 POST 序列化表单数据

http://api.jquery.com/serializeArray/

var data = $({YOUR_FORM_SELECTOR}).serializeArray();
axios.post('/formdata/store', data)
      .then(res => {
        alert('successfully posted')
      })
      .catch(err => {
        console.log(err)
      })

如果你不需要 jQuery，使用 FormData 类的 javascript

var form = document.querySelector({YOUR_FORM_SELECTOR});
var data = new FormData(form);
axios.post('/formdata/store', data)
          .then(res => {
            alert('successfully posted')
          })
          .catch(err => {
            console.log(err)
          })

【讨论】：

【解决方案3】：

您可以将表单包装到form 对象中，您可以在data 部分中将其声明为空的JS 对象。然后，您只需使用v-model="form.firstName" 等将属性绑定到模板中的该对象。最后，您可以使用this.form 使用axios 提交form 对象。

【讨论】：