当前位置: 首页 > 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;才能正常上架。 如果…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...