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对象。

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

3 个答案: