Vue 接口用FormData() 提交数据

例子:

let data = { id: 12, name: '测试', list: [{ id: 22, name: "za", age: 12 }] };// 创建 FormData 实例

        要使用 FormData 将数据提交给接口,首先需要了解 FormData 是如何工作的。FormData 是一种用于异步上传数据的表单数据结构,它可以让你以一种简单的方式发送键值对。

        例子中,你有一个 JavaScript 对象 data,它包含了嵌套的数据结构。要将这个对象转换为 FormData,我们需要遍历这个对象,并将每个键值对添加到 FormData 实例中。

        下面是一个示例代码,展示了如何将你的 data 对象转换为 FormData,并使用 fetch API 将其提交给接口:

let data = { id: 12, name: '测试', list: [{ id: 22, name: "za", age: 12 }] };// 创建 FormData 实例
let formData = new FormData();// 函数用于递归地将对象添加到 FormData
function addToFormData(obj, formData) {for (let key in obj) {if (obj.hasOwnProperty(key)) {// 如果是对象,则递归调用if (typeof obj[key] === 'object') {addToFormData(obj[key], formData);} else {// 否则,直接添加formData.append(key, obj[key]);}}}
}// 将数据添加到 FormData
addToFormData(data, formData);// 使用 fetch API 提交 FormData
fetch('YOUR_ENDPOINT_URL', {method: 'POST',body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

        在这个代码中,我们首先定义了一个 addToFormData 函数,它递归地遍历对象并将每个键值对添加到 FormData 实例中。然后,我们使用 fetch API 将 FormData 发送到服务器。请确保替换 'YOUR_ENDPOINT_URL' 为你的实际接口 URL。

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

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

相关文章

C语言-分支与循环(2)

目录 1、while循环 1.1 if 和 while 的对比 1.2 while 语句的执行流程 6.3 while循环简单例题 2、for 循环 2.1 语法形式 2.2 for循环与while循环对比 2.3 for循环的执行流程 2.4 for循环的简单例题 2.5 扩展:for循环的初始化,判断,…

django学习入门系列之第四点《图标》

文章目录 图标往期回顾 图标 图标网站: Font Awesome,一套绝佳的图标字体库和CSS框架 (dashgame.com) bootstrap提供的不多 注意,要用框架启动,但用html启动的话是用不了的(图标启动不了) 如何使用 如果…

DAMA学习笔记(六)-数据安全

1.引言 数据安全包括安全策略和过程的规划、建立与执行,为数据和信息资产提供正确的身份验证、授权、访问和审计。数据安全实践的目标是根据隐私和保密法规、合同协议和业务要求来保护信息资产。这些要求来自以下几个方面: 1)利益相关方: 应识别利益相关…

YOLO--置信度(超详细解读)

YOLO(You Only Look Once)算法中的置信度(Confidence)是一个关键概念,用于评估模型对预测框内存在目标对象的信心程度以及预测框对目标对象位置的准确性。 一、置信度的定义 数值范围:置信度是一个介于0和…

ES6 对象的扩展(十五)

1. 属性的简洁表示(Property Shorthand) 特性:在对象字面量中,如果属性名和变量名相同,可以省略属性名,直接使用变量值。 用法:简化对象字面量的书写。 const x 1, y 2; const obj { x, y …

vscode 打开远程bug vscode Failed to parse remote port from server output

vscode 打开远程bug vscode Failed to parse remote port from server output 原因如图: 解决:

网络滤波器、EMI滤波器与EMC滤波器在电子元器件中的分类关系

在电子工程领域,滤波器作为关键的电子元器件,广泛应用于信号处理、电磁兼容性和电磁干扰抑制等方面。本文将详细介绍网络滤波器、EMI滤波器和EMC滤波器的基本概念、工作原理及其在电子元器件中的分类关系。 一、网络滤波器 网络滤波器是一种通过处理信号…

Laravel与现代前端:Vue.js与React的无缝集成

Laravel与现代前端:Vue.js与React的无缝集成 在现代Web开发中,Laravel作为后端框架的佼佼者,与前端技术如Vue.js和React的结合,能够创造出功能强大且用户友好的应用。本文将详细介绍如何在Laravel项目中集成Vue.js和React&#x…

脸书登录指南:如何在同一台设备登录多个Facebook账号?

海外社媒营销人员和跨境卖家现在越来越依赖社交媒体平台来拓展业务和接触潜在客户,尤其是Facebook。然而,在进行脸书登录时,你可能会问:如何在同一台设备上登录多个Facebook账号,而不违反Facebook的使用条款&#xff1…

Android 性能优化之卡顿优化

文章目录 Android 性能优化之卡顿优化卡顿检测TraceView配置缺点 StricktMode配置违规代码 BlockCanary配置问题代码缺点 ANRANR原因ANRWatchDog监测解决方案 Android 性能优化之卡顿优化 卡顿检测 TraceViewStricktModelBlockCanary TraceView 配置 Debug.startMethodTra…

vivado 2019.2/modelsim SE-64 2019.2联合仿真

参考链接 需要修改的地方: 编译时几个VHDL的库会报错,将language改为verilogfamily只选择当前板子(artix-7),速度会更快,错误率更低compile library path最好选择vivado安装路径下的位置,很久之…

怎么创一个新的vue3项目

创建一个新的Vue 3项目可以通过多种方式,以下是基于Vue CLI(命令行界面)和Vue官方新的脚手架工具create-vue的详细步骤。 使用Vue CLI创建Vue 3项目 安装Vue CLI: 确保你已经安装了Node.js(建议使用LTS版本&#xff…

Python 基础——元组

1.元组:元组元素不能修改 tuple1 (1, 2, 3, 4, 5, 6) tuple1[2] 3 #该代码会显示运行错误 2.元组的一些操作 #1. tuple1 (1, 2, 3, 4, 5, 6) tuple2 tuple1[:]#将tuple1复制到tuple2#2. tuple1 (1, 2, 3, 4, 5, 6) tuple1[:4] #输出结果为(1&am…

用于大规模图像识别的深度卷积网络

概述 论文地址:https://arxiv.org/pdf/1409.1556.pdf 这项研究探讨了卷积网络深度对图像识别准确性的影响。重要的是,对具有小型卷积滤波器的网络进行的评估表明,具有 16-19 个权重层的深度网络的性能优于传统配置。这些结果使得该模型在20…

把ros消息转换成中文输出

把ros消息转换成中文输出 c实现 发布 //发布性能评估数据 /trilateration_time_log void publishTrilaterationLog(const int reflectorPanelPoints_size,const double duration_count,const std::string& resultType,const std::string& resultChineseMessage,cons…

C#绘制含流动块的管道

1,效果。 2,绘制技巧。 1,流动块的实质是使用Pen的自定义DashStyle绘制的线,并使用线的偏移值呈现出流动的效果。 Pen barPen new Pen(BarColor, BarHeight);barPen.DashStyle DashStyle.Custom;barPen.DashOffset startOffse…

MySQL-日志-优化

目录 介绍一下mysql 的日志 redo log 和binlog 的区别及应用场景 redo log 和 binlog 在恢复数据库有什么区别? redo log 是怎么实现持久化的? redo log除了崩溃恢复还有什么其他作用? (顺序写) redo log 怎么刷入磁盘的知道吗? 两阶…

重塑水利未来:智慧水利解决方案的探索与实践,从物联网、大数据到人工智能,科技如何赋能水利行业,实现智慧化管理与决策

本文关键词:智慧水利、智慧水利工程、智慧水利发展前景、智慧水利技术、智慧水利信息化系统、智慧水利解决方案、数字水利和智慧水利、数字水利工程、数字水利建设、数字水利概念、人水和协、智慧水库、智慧水库管理平台、智慧水库建设方案、智慧水库解决方案、智慧…

探索 IPython 的历史记录:全局命令的魔法

探索 IPython 的历史记录:全局命令的魔法 在数据科学和编程的世界里,IPython 以其强大的交互式特性成为了开发者和科学家们的首选工具。其中,IPython 的历史记录功能是其众多亮点之一。本文将带你深入探索如何在 IPython 中使用 %history 魔…

Python之爬虫基础

Python 是进行网络爬虫开发的热门选择,主要是因为其拥有丰富的库和框架,如 Requests、BeautifulSoup、Scrapy 等,这些工具极大地简化了网页数据的抓取和处理过程。以下是一些 Python 爬虫的基础知识和步骤: 1. 理解网络爬虫 网络…