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

news2024/11/23 3:10:48

一.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.coloradmin.cn/o/1789276.html

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

相关文章

Java Web学习笔记4——HTML、CSS

HTML&#xff1a; HTML&#xff1a;超文本标记语言。 超文本&#xff1a;超越了文本的限制&#xff0c;比普通文本更强大。除了文字信息&#xff0c;还可以定义图片、音频、视频等内容。 标记语言&#xff1a;有标签构成的语言。 HTML标签都是预定义好的&#xff0c;例如&a…

云服务(ECS)Docker安装vulhub安装详解

本文以xshell进行远程控制 1.以ssh连接云服务器 ssh 服务器名公网ip [D:\~]$ ssh root47.99.138.9 在弹框中输入密码 2.安装docker curl -s http://get.docker.com/ | sh rootiZbp1fm14idjlfp53akni8Z:~# curl -s https://get.docker.com/ | sh # Executing docker insta…

【二进制部署k8s-1.29.4】十一、metallb的安装部署

文章目录 简介 一.安装metallb二.配置metallb三.验证metallb 简介 本章节主要讲解安装metallb-v0.7.1的安装&#xff0c;metallb算是平民版的负载均衡&#xff0c;用于测试、访问量较小的情况还是比较不错的&#xff0c;但是对于请求量比较的时候&#xff0c;由于流量都集中在一…

Nginx02-Nginx虚拟主机介绍、日志介绍、Location规则介绍

目录 写在前面NginxNginx处理用户请求流程虚拟主机虚拟主机的分类基于域名的虚拟主机基于端口的虚拟主机基于IP的虚拟主机 Nginx日志错误日志案例 访问日志访问格式变量案例 Location规则案例1案例2Location规则小结 写在前面 这是Nginx第二篇&#xff0c;内容为Nginx处理用户请…

遗传算法+神经网络!基于遗传-神经网络(GA-BP)算法的光伏出力预测程序代码!

前言 准确地预测光伏发电出力对于电力系统运营和稳定性至关重要。随着预测技术的不断进步&#xff0c;越来越多的研究者逐渐意识到遗传算法在优化神经网络在新能源出力预测中的潜力。遗传算法是一种模拟生物进化过程的优化算法&#xff0c;通过不断迭代和选择&#xff0c;搜索…

C++ priority_queue 优先级队列

一.什么是priority_queue&#xff08;优先级队列&#xff09; 优先级队列是一种容器适配器&#xff0c;数据的存储是采用堆的形式实现的&#xff0c;保证第一个元素是优先级队列的最大值或最小值。&#xff08;默认建大堆&#xff09; 默认用vector作为底层数据的存储容器。 二…

聚观早报 | 苹果预热WWDC24;怪兽充电第一季度营收

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 6月5日消息 苹果预热WWDC24 怪兽充电第一季度营收 vivo Watch GT设计细节 长城汽车关闭欧洲总部 小米MIX Flip将…

MongoDB下载安装入门 + SpringBoot简单集成

MongoDB安装入门 SpringBoot简单集成 MongoDB下载安装下载安装连接图形化界面MongoDB Compass Navicat Premium Spring Boot集成API操作添加maven配置数据库连接调用Mongo API MongoDB下载安装 下载安装 MongoDB官网地址&#xff1a;https://www.mongodb.com/ 下载地址&…

AI-WEB-1 vulnhub靶场

AI-WEB-1 端口扫描 仅开放80端口 访问80端口 啥也没有 目录扫描 查看robots.txt 发现两个新目录 Disallow: /m3diNf0/ Disallow: /se3reTdir777/uploads/全都无权限访问 加入路径后再次扫描目录 发现/m3diNf0/目录下存在info.php&#xff0c;/se3reTdir777/目录下存在ind…

HTML动态爱心

写在前面 本文主要是对某音爆火的html爱心代码做简单的解析&#xff0c;需要代码文末自取哦~ HTML入门 HTML&#xff08;Hypertext Markup Language&#xff09;是一种标记语言&#xff0c;用于创建网页。它由一系列的标签组成&#xff0c;这些标签可以告诉浏览器如何显示网…

先进工艺的DPT技术

“2.5GHz频率 hierarchy DVFS低功耗A72培训” 2.5GHz 12nm 景芯A72 upf DVFS 后端实战训练营&#xff01;随到随学&#xff01; 课程采用hierarchy/partition flow&#xff0c;先完成单核A72实战&#xff0c;然后完成A72 TOP实战&#xff01;训练营简介&#xff1a; Instance&a…

斯坦福抄袭清华、面壁智能大模型,当事人已道歉、删项目

6月4日&#xff0c;两名斯坦福大学生Aksh Garg和Siddharth Sharma&#xff0c;承认抄袭清华和面壁智能联合开发的MiniCPM-Llama3-V2.5&#xff08;以下简称V2.5&#xff09;多模态大模型事件&#xff0c;并在社交平台公开道歉、删掉开源项目。 该抄袭事件也得到了斯坦福大学AI…

【计算机毕业设计】302微信小程序的充电桩管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

「漏洞复现」用友NC pagesServlet SQL注入漏洞(XVE-2024-13067)

0x01 免责声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;作者不为此承担任何责任。工具来自网络&#xff0c;安全性自测&#xff0c;如有侵权请联系删…

LangChain Agent 最新教程详解及示例学习

LangChain Agent的终极指南&#xff0c;本教程是您使用 Python 创建第一个agent的重要指南&#xff0c;请立即开始你的 LLM 开发之旅。 一、什么是LangChain Agent&#xff08;代理&#xff09; LangChain中代理背后的想法是利用语言模型以及要执行的一系列操作。代理正在使用…

`THREE.BufferGeometry` 是 Three.js 中一个强大的类,用于表示几何体数据。

demo案例 THREE.BufferGeometry 是 Three.js 中一个强大的类&#xff0c;用于表示几何体数据。与传统的 THREE.Geometry 类相比&#xff0c;它使用缓冲区来存储顶点数据&#xff0c;从而在性能上有显著的提升。以下是 THREE.BufferGeometry 的详细说明&#xff0c;包括其输入参…

ARM服务器在云手机中可以提供哪些支持

ARM服务器作为云手机的底层支撑&#xff0c;在很多社媒APP或者电商APP平台都有着很多看不见的功劳&#xff0c;可以说ARM扮演着至关重要的底层支持角色&#xff1b; 首先&#xff0c;ARM 服务器为云手机提供了强大的计算能力基础。云手机需要处理大量的数据和复杂的运算&#x…

Sentinel不使用控制台基于注解限流,热点参数限流

目录 一、maven依赖 二、控制台 三、基于注解限流 四、热点参数限流 五、使用JMeter验证 一、maven依赖 需要注意&#xff0c;使用的版本需要和你的SpringBoot版本匹配&#xff01;&#xff01; Spring-Cloud直接添加如下依赖即可&#xff0c;baba已经帮你指定好版本了。…

沃尔玛、美客多跨境平台自养号全攻略:防关联环境系统搭建与养号技巧

在沃尔玛、美客多等跨境平台进行自养号的过程中&#xff0c;环境系统的选择和账号的养育是至关重要的。以下是我对这两个方面的经验和技巧的总结&#xff1a; 环境系统&#xff1a; 市面上有很多环境系统可供选择&#xff0c;但质量参差不齐。为了实现足够高的伪装度&#xff…

服务器数据恢复—raid5阵列上分配的卷被删除后重建如何恢复被删除卷的数据?

服务器存储数据恢复环境&#xff1a; 某品牌FlexStorage P5730服务器存储&#xff0c;存储中有一组由24块硬盘组建的RAID5阵列&#xff0c;包括1块热备硬盘。 服务器存储故障&#xff1a; 存储中的2个卷被删除&#xff0c;删除之后重建了一个新卷。需要恢复之前删除的一个卷的数…