为什么一定要使用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格式在前后端传递数据的更多相关文章

  1. 编码格式分类: 前后端传递数据的编码格式contentType

    urlencoded:form表单和ajax提交数据的默认编码格式 form-data:传文件 application/json:json格式数据 >>> 前后端分离 urlenco ...

  2. 前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构

    前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构

  3. 学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密

      学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密 技术标签: RSA  AES  RSA AES  混合加密  整合   前言:   为了提高安全性采用了RS ...

  4. 【开源.NET】 轻量级内容管理框架Grissom.CMS(第二篇前后端交互数据结构分析)

    这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...

  5. 基于Ajax技术的前后端Json数据交互方式实现

    前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起 ...

  6. spring boot 登录注册 demo (三) -- 前后端传递

    前端页面通过thymeleaf渲染 <dependency> <groupId>org.springframework.boot</groupId> <art ...

  7. vue+jquery使用FormData向后端传递数据和文件,express如何获取

    使用multiparty 模块 下载 cnpm install multiparty --save 前端代码: <template> <div class="add-are ...

  8. Django前后端交互&数据验证

    一.前端--->后端 1.form表单 <form method="post" action="/test/?a=1&b=2"> {% ...

  9. 使用axios向后端传递数据,后端接收不到?

    开始使用axios的时候,按照官网的例子请求后端接口,遇到了后端接收不到数据的情况. 翻看了文档也没找到解决方法.先来了解下基本的axios 想要使用axios,需要先安装 npm install a ...

随机推荐

  1. beamer插入图片的一些技巧

    1. 点一下,让另一张隐藏的图出现

  2. 移动APP测试入手点

  3. 《修炼之道:.NET开发要点精讲》读书笔记(一)

    CLR 公共语言运行库 没有CLR的存在,就不能讲该中间件转换成对应操作系统中的机器指令. 程序集是非完全编译的产物,它兼备了源代码和本地代码的特性,是一种介于源代码和本地代码之间的独立存在的一种数据 ...

  4. 四、PyQt5布局管理(绝对&相对、水平、垂直、格栅、表单)

    目录 一.绝对布局 二.盒布局 三.格栅布局 四.格栅布局跨行跨列显示 布局管理即设置窗体上各个控件的位置,对于新手来说,这是学习的难点. 布局管理根据绝对坐标是否变动分为绝对布局和相对布局两大类.采 ...

  5. 阿里巴巴Java编码规范插件安装使用指南

    编码规范插件安装使用指南 阿里技术公众号公布的<阿里巴巴Java开发规约>,瞬间引起全民代码规范的热潮,后又发布了PDF的终极版,大家踊跃留言,期待配套的静态扫描工具开放出来. 为了让开发 ...

  6. C++实现对文件中各单词词频的统计及其代码优化

    先给出github上的代码链接以及项目需求 1.项目概述 这个项目的需求可以概括为:对记事本(txt)文件进行单词的词频统计和排序,排序结果以指定格式输出到默认文件中,并要求能够快速地完成整个统计和结 ...

  7. resin4配置之一个resin下多个app的正确配置方法

    可能是因为resin4出来不久的原因,很多人对一个resin配置多个app不是很了解,经过几个小时的研究,有了一些小的成果,在此分享一下: 在开发的时候很多人习惯了一个resin下配置多个app,习惯 ...

  8. 在datasnap 中使用unidac 访问数据(客户端)

    前面我们讲了如何使用unidac 在datasnap 的服务端访问数据库,今天大概讲一下客户端如何访问 前面做的服务器?其实这个客户端适合任何datasnap 服务端. 首先我们建一个应用,并加入一个 ...

  9. 每日一练ACM 2019.0417

    Problem Description 给定两个正整数,计算这两个数的最小公倍数.   Input 输入包含多组测试数据,每组只有一行,包括两个不大于1000的正整数.   Output 对于每个测试 ...

  10. jquery学习总结24-36

    一.jquery的自定义事件 1.自定义事件不能通过eventName()来添加,只能通过on来绑定 2.自定义事件需要通过trigger(自动触发)来进行触发 二.jauery事件命名空间 1.事件 ...