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

一.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);});}

通过

var formData = new FormData();

创建一个空对象,然后通过append把数据填进去,最后将formData传到后端

后端接收即可,下面是后端返回JSON数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848930.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Gradle和Maven都是广泛使用的项目自动化构建工具

Gradle和Maven都是广泛使用的项目自动化构建工具&#xff0c;但它们在多个方面存在差异。以下是关于Gradle和Maven的详细对比&#xff1a; 一、构建脚本语言 Maven&#xff1a;使用XML作为构建脚本语言。XML的语法较为繁琐&#xff0c;不够灵活&#xff0c;对于复杂的构建逻辑…

【FPGA约束】如何确定FPGA和SDI驱动芯片之间io的时序约束值

确定FPGA和SDI&#xff08;Serial Digital Interface&#xff09;驱动芯片之间的I/O时序约束值&#xff0c;需要考虑多个因素&#xff0c;包括信号的传输特性、FPGA的I/O标准、以及SDI接口规范。以下是一些步骤和考虑因素&#xff1a; 理解SDI接口规范&#xff1a;首先&#xf…

WALT算法简介

WALT(Windows-Assist Load Tracing)算法是由Qcom开发&#xff0c; 通过把时间划分为窗口&#xff0c;对 task运行时间和CPU负载进行跟踪计算的方法。为任务调度、迁移、负载均衡及CPU调频 提供输入。 WALT相对PELT算法&#xff0c;更能及时反映负载变化&#xff0c; 更适用于…

String类知识

目录 一、String存在意义 二、字符串为何不可变 三、String类常用方法 1、字符串构造 2、String对象的比较 3、字符串查找 4、转化 &#xff08;1&#xff09;数值和字符转化 &#xff08;2&#xff09;大小写转换 &#xff08;3&#xff09;字符串转数组 &#xff08;4&…

系统架构设计师【补充知识】: 应用数学 (核心总结)

24.1 图论之最小生成树 (1)定义: 在连通的带权图的所有生成树中&#xff0c;权值和最小的那棵生成树(包含图中所有顶点的树)&#xff0c;称作最小生成树。 (2)针对问题: 带权图的最短路径问题。 (3)最小生成树的解法有普里姆(Prim)算法和克鲁斯卡尔(Kruskal)算法&#xff0c;我…

重复文件怎么查找并清理,试试这5个文件去重方法(新)

重复文件怎么查找并清理&#xff1f;日常工作中&#xff0c;我们使用电脑的时间长了&#xff0c;都会累积大量好的文件&#xff0c;这其中难免会出现重复文件。这些重复文件不仅占用了电脑磁盘空间&#xff0c;还会降低电脑性能。因此&#xff0c;我们必须定期对重复文件查找出…

2020年09月C语言二级真题

目录 单词倒排 题目描述 样例 细菌的繁殖与扩散 题目描述 样例 高精度加法 题目描述 样例 单词倒排 题目描述 编写程序&#xff0c;读入一行英文(只包含字母和空格&#xff0c;单词间以单个空格分隔)&#xff0c;将所有单词的顺序倒排并输出&#xff0c;依然以单个空格…

fastapi学习前置知识点

前置知识点 FastApi&#xff1a;一个用于构建API的现代、快速&#xff08;高性能&#xff09;的web框架。 FastApi是建立在Pydantic和Starlette基础上&#xff0c;Pydantic是一个基于Python类型提示来定义数据验证、序列化和文档的库。Starlette是一种轻量级的ASGI框架/工具包…

zs6d配置-2

https://github.com/PhilippAuss/ZS6Dactivate没反应 点右边那个小箭头选cmd终端&#xff0c;好像还有个取消powershell的建立环境限制&#xff1b; 某个跨文件夹调用总失败 有种方法是在调用代码里加两行什么os之类的&#xff0c;但每个文件都要加很麻烦&#xff1b;或者&a…

GIF录屏工具Gif123 v3.3.0单文件

软件介绍 GIF的优势是小、轻、快&#xff0c;适合时间短、画面小、需要嵌入其他页面&#xff0c;打开就自动循环播放的动画。Gif123可录制合成鼠标轨迹,可调整鼠标指针大小,可在设置中打开鼠标指针高亮光圈功能,高亮光圈可跟随鼠标移动以指示鼠标位置。软件极其简单&#xff0…

流水线建构apk、abb实战(二)

gradlew 命令生成apk、aab包 其实构建应用程序包就几个命令&#xff1a; ### 生成AAB&#xff1a; gradlew bundleRelease #输出到[project]/build/outputs/bundle/release/下 gradlew bundleDebug### 生成APK&#xff1a; gradlew assembleRelease gradlew assembleDebug###…

菜刀冰蝎哥斯拉流量通讯特征绕过检测反制感知

1.加密流程 工具名称requestsresponseAntSwordbase64等方式明文冰蝎2.0开启Openssl扩展-动态密钥aes加密aes加密base64未开启Openssl扩展-异或异或base64冰蝎3.0开启Openssl扩展-静态密钥aes加密aes加密base64未开启Openssl扩展-异或异或base64哥斯拉php的为base64异或base64异…

游戏《酒店业领袖》

为快餐连锁店麦当劳&#xff0c;我们创建了一款名为“好客领袖”的游戏。麦当劳的员工可以在网站上注册&#xff0c;并测试自己是否扮演酒店领导的角色&#xff0c;在餐厅可能出现的各种情况下快速做出决定。奖品等待着那些在比赛中表现最好的人。 对于该项目&#xff0c;我们&…

Qt | QMessageBox 技巧详解(基础进)

01、QMessageBox `QMessageBox`是 Qt 库中的一个用于显示消息框的类。它提供了一种方便的方式来向用户显示信息、警告、错误提示等各种类型的消息。用户可以通过它设置消息的文本、标题、图标以及相关的按钮,如确定、取消、是、否等。`QMessageBox`使得开发者能够以一种简洁直…

【Meetup】探索Apache SeaTunnel的二次开发与实战案例

在数据科技快速演进的今天&#xff0c;业务场景的复杂化和数据量的激增&#xff0c;推动了大数据技术的迅速发展&#xff0c;在众多开源大数据处理工具中&#xff0c;Apache SeaTunnel以其强大的数据集成能力&#xff0c;成为众多企业的首选。 但随着应用深入&#xff0c;企业面…

【三更新】多分式标注 脚本工具

这篇是 多分式标注 脚本工具的第三次更新文章。 原文章及历次更新请点击链接 【ArcGIS 脚本工具】生成多分式标注 【更新】多分式标注 脚本工具 【再更新】多分式标注&#xff08;船新版本&#xff09; 更新内容 1、组合字段标注 分子、分母、前分、后分&#xff0c;四个…

流水线建构apk、abb实战(一)

在构建机上需要下载的工具 流水线中的构建机无法使用Android Studio中自带的sdk工具下载&#xff0c;所以得下载commandlinetools命令行工具&#xff0c;下载后使用随附的 sdkmanager 下载其他 SDK 软件&#xff0c;解压后按照/cmdline-tools/latest/bin/sdkmanager目录结构整…

Camtasia Studio2024破解汉化版crack安装包下载地址

在当今数字化时代&#xff0c;视频内容已成为传播信息和吸引观众的重要方式。无论是企业宣传、在线教育还是个人创作&#xff0c;一款功能强大的视频编辑软件都是必不可少的工具。而Camtasia Studio2024作为业界领先的视频编辑软件&#xff0c;其永久免费版及最新版本的功能更是…

C++中const和static修饰的成员函数

1、const修饰成员函数 特点&#xff1a; 这个成员函数只能对数据成员进行读操作&#xff0c;不能进行写操作&#xff0c;防止误操作 比如&#xff1a;访问数据 格式&#xff1a; class 类名 { public: 返回值…

28 - 只出现一次的最大数字(高频 SQL 50 题基础版)

28 - 只出现一次的最大数字 select (selectnumfromMyNumbers group bynum havingcount(num)1order by num desc limit 1) as num;