当前位置: 首页 > news >正文

使用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数据

相关文章:

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

一.form表单 <form submit.prevent"submitForm"></form> form表单像这样写出来&#xff0c;然后把需要用户填写的内容写在form表单内。 二.表单内数据绑定 <div class"input-container"><div style"margin-left: 9px;"&…...

6、架构-服务端缓存

为系统引入缓存之前&#xff0c;第一件事情是确认系统是否真的需要缓 存。从开发角度来说&#xff0c;引入缓存会提 高系统复杂度&#xff0c;因为你要考虑缓存的失效、更新、一致性等问题&#xff1b;从运维角度来说&#xff0c;缓存会掩盖一些缺 陷&#xff0c;让问题在更久的…...

服务器遭遇UDP攻击时的应对与解决方案

UDP攻击作为分布式拒绝服务(DDoS)攻击的一种常见形式&#xff0c;通过发送大量的UDP数据包淹没目标服务器&#xff0c;导致网络拥塞、服务中断。本文旨在提供一套实用的策略与技术手段&#xff0c;帮助您识别、缓解乃至防御UDP攻击&#xff0c;确保服务器稳定运行。我们将探讨监…...

美团发布2024年一季度财报:营收733亿元,同比增长25%

6月6日&#xff0c;美团(股票代码:3690.HK)发布2024年第一季度业绩报告。受益于经济持续回暖和消费复苏&#xff0c;公司各项业务继续取得稳健增长&#xff0c;营收733亿元(人民币&#xff0c;下同)&#xff0c;同比增长25%。 财报显示&#xff0c;一季度&#xff0c;美团继续…...

sql注入-布尔盲注

布尔盲注&#xff08;Boolean Blind SQL Injection&#xff09;是一种SQL注入攻击技术&#xff0c;用于在无法直接获得查询结果的情况下推断数据库信息&#xff1b;它通过发送不同的SQL查询来观察应用程序的响应&#xff0c;进而判断查询的真假&#xff0c;并逐步推断出有用的信…...

docker-compose部署 kafka 3.7 集群(3台服务器)并启用账号密码认证

文章目录 1. 规划2. 服务部署2.1 kafka-012.2 kafka-022.3 kafka-032.4 启动服务 3. 测试3.1 kafkamap搭建&#xff08;测试工具&#xff09;3.2 测试 1. 规划 服务IPkafka-0110.10.xxx.199kafka-0210.10.xxx.198kafka-0310.10.xxx.197kafkamp10.10.xxx.199 2. 服务部署 2.1…...

LeetCode-704. 二分查找【数组 二分查找】

LeetCode-704. 二分查找【数组 二分查找】 题目描述&#xff1a;解题思路一&#xff1a;注意开区间和闭区间背诵版&#xff1a;解题思路三&#xff1a; 题目描述&#xff1a; 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xf…...

Rust 性能分析

都说Rust性能好,但是也得代码写得好,猜猜下面两个代码哪个快 . - 力扣&#xff08;LeetCode&#xff09; use std::collections::HashMap; use lazy_static::lazy_static;lazy_static! {static ref DIGIT: HashMap<char, usize> {let mut m HashMap::new();for c in …...

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

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

Seed-TTS语音编辑有多强?对比实测结果让你惊叹!

GLM-4-9B 开源系列模型 前言 就在最近&#xff0c;ByteDance的研究人员最近推出了一系列名为Seed-TTS的大规模自回归文本转语音(TTS)模型,能够合成几乎与人类语音无法区分的高质量语音。那么Seed-TTS的表现究竟有多强呢?让我们一起来感受下Seed-TTS带来的惊喜吧! 介绍Seed-TTS…...

Vue3——实现word,pdf上传之后,预览功能(实测有效)

vue-office/pdf - npm支持多种文件(**docx、excel、pdf**)预览的vue组件库&#xff0c;支持vue2/3。也支持非Vue框架的预览。. Latest version: 2.0.2, last published: a month ago. Start using vue-office/pdf in your project by running npm i vue-office/pdf. There are …...

JVM之【类的生命周期】

首先&#xff0c;请区分Bean的声明周期和类的声明周期。此处讲的是类的声明周期 可以同步观看另一篇文章JVM之【类加载机制】 概述 在Java中数据类型分为基本数据类型和引用数据类型 基本数据类型由虚拟机预先定义&#xff0c;引用数据类型则需要进行类的加载 按照]ava虚拟机…...

分库分表场景下,如何设计与实现一种高效的分布式ID生成策略

在构建大规模分布式系统时&#xff0c;随着数据量的爆炸式增长&#xff0c;单个数据库往往难以承载如此庞大的数据存储与访问需求。这时&#xff0c;分库分表便成为一种有效的解决方案&#xff0c;它通过将数据分散存储在多个数据库或表中&#xff0c;从而提高系统的处理能力和…...

机器人系统ros2-开发学习实践16-RViz 用户指南

RViz 是 ROS&#xff08;Robot Operating System&#xff09;中的一个强大的 3D 可视化工具&#xff0c;用于可视化机器人模型、传感器数据、路径规划等。以下是RViz用户指南&#xff0c;帮助你了解如何使用RViz来进行机器人开发和调试。 启动可视化工具 ros2 run rviz2 rviz2…...

安全测试 之 安全漏洞 CSRF

1. 背景 安全测试是在功能测试的基础上进行的&#xff0c;它验证软件的安全需求&#xff0c;确保产品在遭受恶意攻击时仍能正常运行&#xff0c;并保护用户信息不受侵犯。 2. CSRF 定义 CSRF&#xff08;Cross-Site Request Forgery&#xff09;&#xff0c;中文名为“跨站请…...

交易中的预测和跟随

任何的交易决策&#xff0c;一定是基于某种推理关系的&#xff0c;这种推理关系是基于t时刻之前的状态&#xff0c;得到t时刻之后的结果&#xff0c;我们基于这种推理关系&#xff0c;根据当前的状态&#xff0c;形成了未来结果的某种预期&#xff0c;然后基于这种预期采取相应…...

vs2022专业版永久密钥

vs2022专业版永久密钥&#xff1a; vs2022专业版永久密钥&#xff1a; Visual Studio 2022 Enterprise&#xff1a;VHF9H-NXBBB-638P6-6JHCY-88JWH Visual Studio 2022 Professional&#xff1a;TD244-P4NB7-YQ6XK-Y8MMM-YWV2J...

MongoDB环境搭建

一.下载安装包 Download MongoDB Community Server | MongoDB 二、双击下载完成后的安装包开始安装&#xff0c;除了以下两个部分需要注意操作&#xff0c;其他直接next就行 三.可视化界面安装 下载MongoDB-compass&#xff0c;地址如下 MongoDB Compass Download (GUI) | M…...

数据结构【队列】

队列的的概念 队列是一种特殊的线性表&#xff0c;特殊之处在于它只允许在表的头部进行删除操作&#xff0c;而在表的尾部进行插入操作&#xff0c;和栈一样&#xff0c;队列是一种操作受限制的线性表。进行插入操作的端称为队尾&#xff0c;进行删除操作的端称为队头。队列中…...

微信小程序上架,AI类目审核(AI问答、AI绘画、AI换脸)

小程序对于生成式AI类目的产品上架审核较为严格&#xff0c;这也是近两年新增了几个类目&#xff0c;一旦小程序中涉及生成式AI相关的内容&#xff0c;如果你选择相应类目&#xff0c;但审核被划归为这一类&#xff0c;都需要准备此类目的审核&#xff0c;才能正常上架。 如果…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...