为公益组织做网站,广州做网站报价,长春h5建站模板,seo是什么单位一.form表单
form submit.preventsubmitForm/form
form表单像这样写出来#xff0c;然后把需要用户填写的内容写在form表单内。 二.表单内数据绑定
div classinput-containerdiv stylemargin-left: 9px;form submit.preventsubmitForm/form
form表单像这样写出来然后把需要用户填写的内容写在form表单内。 二.表单内数据绑定
div classinput-containerdiv stylemargin-left: 9px;住客姓名/divinput typetext v-modelguestName
/div 比如在这里将住客姓名的输入框与guestName进行绑定 div classcontainerdiv预计到店时间/divselect v-modelestimatedArrivalTime classselectoption v-foroption in estimatedArrivalOptions :valueoption.value{{ option.label }}/option/selectdiv stylemargin-top: 15px;房间整晚保留/div
/div 三.提交按钮 button typesubmit查询/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);});}
通过
var formData new FormData();创建一个空对象然后通过append把数据填进去最后将formData传到后端
后端接收即可下面是后端返回JSON数据
