使用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,一经查实,立即删除!

相关文章

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;我们必须定期对重复文件查找出…

fastapi学习前置知识点

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

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;我们&…

【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;其永久免费版及最新版本的功能更是…

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

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

二叉树的先序创建、复制、深度及结点个数

文章目录 前言一、二叉树的先序创建二、二叉树的复制三、二叉树的深度四、二叉树的结点个数总结 前言 T_T此专栏用于记录数据结构及算法的&#xff08;痛苦&#xff09;学习历程&#xff0c;便于日后复习&#xff08;这种事情不要啊&#xff09;。所用教材为《数据结构 C语言版…

体育器材管理系统(Java+MySQL)

技术栈 Java语言&#xff1a;作为主要编程语言&#xff0c;用于编写应用逻辑和界面交互。MySQL数据库&#xff1a;用于存储和管理体育器材的相关数据。Swing窗口视图&#xff1a;用于创建图形用户界面&#xff0c;使用户能够通过窗口进行操作&#xff08;GBK编码&#xff09;。…

线性模型-分类

一、线性判别分析LDA 线性判别分析是一种经典的线性学习方法&#xff0c;在二分类问题上最早是Fisher提出的&#xff0c;亦称为Fisher判别分析。 Fisher判别分析是一种用于降维和分类的统计方法&#xff0c;旨在找到可以最好区分不同类别的特征。它基于类内方差和类间方差的比…

Polar Web【简单】uploader

Polar Web【简单】uploader Contents Polar Web【简单】uploader思路EXP运行&总结 思路 本题的重点仍是文件上传&#xff0c;只是期间需要加上一步自主的文件上传。 打开环境&#xff0c;审查代码&#xff0c;发现在上传文件之后会自动生成一个以MD5散列值命名的目录&#…

COMPUTEX 2024 国际电脑展即将举行,英伟达宣布将Copilot+引入RTX系列设备,赋能游戏本AI助理

COMPUTEX 2024 国际电脑展即将于2024年6月4日至7日在台北南港展览馆1馆及2馆盛大举行。作为业界瞩目的盛会&#xff0c;本次展会不仅吸引了全球各地的科技爱好者&#xff0c;更迎来了AMD CEO苏姿丰博士和NVIDIA首席执行官黄仁勋的精彩演讲。 在展会的开幕之际&#xff0c;图形…

查看服务器端口是否打开,如何查看服务器端口是否打开

查看服务器端口是否打开&#xff0c;是确保服务器正常运行和网络通信畅通的关键步骤。以下是几个有力的方法&#xff0c;帮助你快速、准确地判断端口状态。 首先&#xff0c;你可以使用telnet命令来检测端口的连通性。telnet是一个网络协议&#xff0c;可以用于远程登录和管理网…