使用Vue.js将form表单传递到后端

news2024/12/22 22:27:16

一.form表单

<form @submit.prevent="submitForm">

</form>

form表单像这样写出来，然后把需要用户填写的内容写在form表单内。

二.表单内数据绑定

<div class="input-container">
            <div style="margin-left: 9px;">住客姓名</div>
            <input type="text" v-model="guestName">
</div>

比如在这里，将住客姓名的输入框与guestName进行绑定

<div class="container">
    <div>预计到店时间</div>
    <select v-model="estimatedArrivalTime" class="select">
        <option v-for="option in estimatedArrivalOptions" :value="option.value">{{ option.label }}</option>
    </select>
    <div style="margin-top: 15px;">房间整晚保留</div>
</div>

三.提交按钮

        <button type="submit">查询</button>

在表单的最后写出提交按钮，当点击后，就会触发表单所绑定的submitForm方法

四.JS部分

首先，绑定的那些元素要在data里先定义好

然后在methods里写出表单要触发的方法

submitForm() {
     
            var formData = new FormData();
            formData.append('checkInDate', document.getElementById('checkInDate').textContent);
            formData.append('checkOutDate', document.getElementById('checkOutDate').textContent);
            formData.append('roomCount', this.roomCount);
            formData.append('guestName', this.guestName);
            formData.append('email', this.email);
            formData.append('phoneNumber', this.phoneNumber);
            formData.append('estimatedArrivalTime', this.estimatedArrivalTime);
            formData.append('selectedRoomId',this.selectedRoomId)


            console.log(formData);

            // 发送数据到后端
            axios.post('http://127.0.0.1:8000/hotels/hotel_order/', formData)
                .then(response => {
                    console.log('success')
                })
                .catch(error => {
                    // 处理错误
                    console.error(error);
                });
        }

通过