使用FormData格式在前后端传递数据
为什么一定要使用formdata格式……很大原因是因为当时我犯蠢……
前端肯定是JS了,具体不写了,使用Postman测试,后端语言是Java,框架Spring Boot,使用IntelliJ IDEA
一、基本类型
例:
可以看到form-data只能传递键值对形式。
简单类型直接传递就可以了。
二、对象类型
Java代码:
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController; class User {
String name;
int age; public String getName() {
return name;
} public void setName(String name) {
this.name = name;
} public int getAge() {
return age;
} public void setAge(int age) {
this.age = age;
}
} @RestController
@RequestMapping(value={"/example"})
public class Example { @RequestMapping(value={"/user"})
public void objectType(User user) {
return;
} }
前端数据:
name: 'xiaoming'
age: 18
三、复杂情况
行吧……直接说我遇到的问题,接收一个对象和一个对象数组。
同时接收两个参数时不可能的(至少我没发现),首先要建一个对象包含这两个参数。
上代码…
public class CLS1 {
int id;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
}
/***********************/
public class CLS2 {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
/***********************/
import java.util.ArrayList; public class Wrapper {
CLS1 cls1;
ArrayList<CLS2> cls2List;
public CLS1 getCls1() {
return cls1;
}
public void setCls1(CLS1 cls1) {
this.cls1 = cls1;
}
public ArrayList<CLS2> getCls2List() {
return cls2List;
}
public void setCls2List(ArrayList<CLS2> cls2List) {
this.cls2List = cls2List;
}
}
/***********************/
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController; import java.util.ArrayList; @RestController
@RequestMapping(value={"/example"})
public class Example {
@RequestMapping(value={"/complex"})
public void complexType(Wrapper wrapper) {
CLS1 cls1 = wrapper.getCls1();
ArrayList<CLS2> cls2s = wrapper.getCls2List();
} }
重点在于前端的数据格式:
cls1.id: 233
cls2List[0].name: 'hello'
cls2List[1].name: 'world'
四、前端格式化工具类
前端手打肯定很麻烦,写了一个对象转formdata键值对的函数,自己试了下没什么问题,有没有bug就不知道了……
function objToFd(obj, form, name) {
const fd = form || new FormData() if (typeof obj !== 'object' || obj instanceof File) {
fd.append(name, obj)
return fd
} const keyName = name ? name + '.' : '' for (const prop in obj) {
// 判断是自己的属性 且不为空
if (prop != null && obj.hasOwnProperty(prop) && obj[prop] != null && obj[prop] !== '') {
const val = obj[prop]
if (val instanceof Array) {
// 如果是数组
val.map((item, index) => {
objToFd(item, fd, keyName + prop + '[' + index + ']')
})
} else {
objToFd(val, fd, keyName + prop)
}
}
} return fd
}
测试:
let data = {
k1: "k1-v",
k2: 345,
k3: {
k31: [1, 2, { k313: 'k313-v' }],
k32: {
k321: 'k321-v',
k322: true,
k323: ['con', 'ff']
}
},
k4: '',
k5: undefined,
k6: ['m', 'd', 'z', 'z']
} const fd = objToFd(data);
for (var pair of fd.entries()) {
console.log(pair[0] + ': ' + pair[1])
} /******* 输出 *******/
k1: k1-v
k2: 345
k3.k31[0]: 1
k3.k31[1]: 2
k3.k31[2].k313: k313-v
k3.k32.k321: k321-v
k3.k32.k322: true
k3.k32.k323[0]: con
k3.k32.k323[1]: ff
k6[0]: m
k6[1]: d
k6[2]: z
k6[3]: z
以上全是自己在网上查资料&瞎试出来了,不保证准确性。
使用FormData格式在前后端传递数据的更多相关文章
- 编码格式分类: 前后端传递数据的编码格式contentType
urlencoded:form表单和ajax提交数据的默认编码格式 form-data:传文件 application/json:json格式数据 >>> 前后端分离 urlenco ...
- 前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构
前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构
- 学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密
学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密 技术标签: RSA AES RSA AES 混合加密 整合 前言: 为了提高安全性采用了RS ...
- 【开源.NET】 轻量级内容管理框架Grissom.CMS(第二篇前后端交互数据结构分析)
这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...
- 基于Ajax技术的前后端Json数据交互方式实现
前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起 ...
- spring boot 登录注册 demo (三) -- 前后端传递
前端页面通过thymeleaf渲染 <dependency> <groupId>org.springframework.boot</groupId> <art ...
- vue+jquery使用FormData向后端传递数据和文件,express如何获取
使用multiparty 模块 下载 cnpm install multiparty --save 前端代码: <template> <div class="add-are ...
- Django前后端交互&数据验证
一.前端--->后端 1.form表单 <form method="post" action="/test/?a=1&b=2"> {% ...
- 使用axios向后端传递数据,后端接收不到?
开始使用axios的时候,按照官网的例子请求后端接口,遇到了后端接收不到数据的情况. 翻看了文档也没找到解决方法.先来了解下基本的axios 想要使用axios,需要先安装 npm install a ...
随机推荐
- vue2项目结构搭建
vue2项目结构初搭建与项目基本流程 一.开始项目结构搭建的重要性 决定项目是否能够健康成长 决定了项目是否利于多人协作开发 决定了项目是否利于后期维护 决定了项目是否性能良好 决定了代码是否重用率降 ...
- CENTOS7上安装MYSQL5.7.21流程
1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置:/data/log/mysql 2下 ...
- 离线eclipse添加web工程
下载了eclipse,先写的后台程序,后来写前台程序的时候发现没有 新建->web dynamic project,如下方式添加: 帮助->安装新软件,在work with中选择版本对应的 ...
- C语言闰年问题程序框图
判定2000-2500年中的每一年是否为闰年,并将结果输出. 先分析闰年成立条件: 1)能被4整除,但不能被100整除的年份都是闰年: (2)能被400整除的年份是闰年: #include<st ...
- python线程——创建和启动
可以通过实例化一个threading.Thread()对象来创建子线程. import threading import time def listen_music(num): print(" ...
- intent和手势探测
一.三种启动方法 setComponent ComponentName comp = new ComponentName( this, SecondActivity.class); Intent in ...
- linux下使用iptables统计ip/端口流量
1.添加ip/端口的流量统计 入网流量: iptables -A INPUT -d 出网流量: iptables -A OUTPUT -s 2.查看流量统计信息 iptables -L -v -n - ...
- 在原生Windows安装Keras
既然要深入学习,就不能和时代脱节,所以选择了keras,资源相对比较丰富.由于Windows饱受歧视,各种文档都不推荐使用.但我又没有换系统的成本,所以还是凑合下,毕竟他们给出了方法,稍微折腾一下还是 ...
- 20155326《网路对抗》Exp8 WEB基础实践
20155326<网路对抗>Exp8 WEB基础实践 实践内容 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写 ...
- ubuntu+apache2设置访问、重定向到https
环境:ubunt14裸机,apache2,php5 条件:证书(部分商家买域名送一年),域名,为了方便均在root用户下进行的 web目录:/var/www/test 证书目录(自建):/etc/ap ...