有没有更好的方式发送表单数据？

Question

我尝试使用以下方法通过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)
      })

Answer 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。

快乐的编码！

Answer 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，请使用JavaScript的FormData类

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

Answer 3

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