springBoot 与 axios 表单提交

Amos 发布于2019-08-15 14:15 / 1173人阅读

摘要：不用于表单提交。实验测试失败状态码请求成功，但是服务端没有接受到数据。服务端当然接受不到数据测试成功状态码使用对数据在提交前进行了格式化，将其转换成的形式，此时服务端成功接收到数据。服务端无法正确解析。

环境声明
springBoot : 1.8
java : jdk1.8
IDE : IDEA

问题描述
axios 表单提交，springBoot 无法接受到数据，但使用swagger测试，可以。

原因
1、axios的表单提交，content-type 默认为 application/json;charset=UTF-8
2、提交数据会附加在payload（以JSON形式）。
3、@ModelAttribute 可以接受表单的数据，但是content-type的类型需要为application/x-www-form。@RequestBody 可以接受表单数据，但是content-type类型需要为application/json。@RequestParam 从URL中接受请求参数。（不用于表单提交）。

实验

测试1.1（失败）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      category:this.category
    }
  });

 public Object inserCategory(@ModelAttribute Category category) {}

http 状态码：

请求成功，但是服务端没有接受到数据。原因是@ModelAttribute需要接收FormData形式的数据

测试1.2（失败）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      category:this.category
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });

public Object inserCategory(@ModelAttribute Category category) {}

http状态码：

Form Data 被默认组装成了 json的形式，虽然我们修改了Content-type。

测试1.3（失败）

if(valid) {
  this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });

public Object inserCategory(@ModelAttribute Category category) {}

FormData 还是json的形式，不是以FormData的形式。服务端当然接受不到数据

测试1.4（成功）

if(valid) {
  this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    },
    transformRequest: [function (data) {
      return that.$qs.stringify(data);
    }],
  });

 public Object inserCategory(@ModelAttribute Category category) {}

http状态码：

使用qs对数据在提交前进行了格式化，将其转换成FormData的形式，此时服务端成功接收到数据。
也就是说，使用@ModelAttribute修饰，客户端的content-type需要是 application/x-www-form-urlencoded 且 FormData数据是正确的FormData格式

测试@RequestBody：

测试2.1（失败）

if(valid) {
  this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
    headers:{
      "Content-Type": "application/x-www-form-urlencoded"
    },
    transformRequest: [function (data) {
      return that.$qs.stringify(data);
    }],
  });

 public Object inserCategory(@RequestBody Category category) {}

也就是说@RequstBody 只能支持以JSON数据格式上传。

测试2.2（失败）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      category:this.category
    }
  })

public Object inserCategory(@RequestBody Category category) {}

以这种形式提交数据会失败，因为category在最外面又包装了一个对象。服务端无法正确解析。

测试2.3（成功）

this.$axios({
    url:this.$rootPath+"/category/category",
    method:"post",
    data:{
      name: this.category.name,
      desc: this.category.desc
    },
   });

public Object inserCategory(@RequestBody Category category) {}

以JSON的形式，将数据上传，服务端成功接受到数据

总结：@RequestBody 只能以json数据提交，数据会负载在Request Payload中；@ModelAttribute 可以以表单数据提交，数据需要以FormData形式提交。

下面是我推荐的写法

this.$axios.post(this.$rootPath+"/category/category",this.$qs.stringify(this.category))

public Object inserCategory(@ModelAttribute Category category) {}

注意：qs 默认会把 content-type 修改为 application/x-www-form-urlencoed。

idc机房托管超融合服务器提交表单表单提交表单数据提交提交整个表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/68498.html

SpringBoot非官方教程 | 第二十篇：处理表单提交

摘要：创建工程涉及了，加上和的起步依赖。创建实体代码清单如下创建页面展示层启动工程，访问点击参考资料源码下载这篇文件主要介绍通过springboot 去创建和提交一个表单。创建工程涉及了 web，加上spring-boot-starter-web和spring-boot-starter-thymeleaf的起步依赖。 org.springf...

impig33 2019-08-16 12:38 评论0 收藏0
SpringBoot非官方教程 | 第二十篇：处理表单提交

摘要：创建工程涉及了，加上和的起步依赖。创建实体代码清单如下创建页面展示层启动工程，访问点击参考资料源码下载这篇文件主要介绍通过springboot 去创建和提交一个表单。创建工程涉及了 web，加上spring-boot-starter-web和spring-boot-starter-thymeleaf的起步依赖。 org.springf...

Invoker 2019-07-31 18:14 评论0 收藏0
Element-ui实现合并多图上传（一次请求多张图片）

摘要：实现多图上传主要用到以下两个属性是自带多图上传的，但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入，有截图可以看出，实质是进行多次请求在上传事件触发后，多图上传的默认实现调用了三次请求。前言工作中碰到需要多图上传，在使用element-ui解决过程中碰到一些问题，在这里分享给大家。环境： Springboot+Vue+Element-ui 正文这次上传使用的是Elem...

loostudy 2019-08-19 10:51 评论0 收藏0
前后端联调之Form Data与Request Payload，你真的了解吗？

摘要：前言做过前后端联调的小伙伴，可能有时会遇到一些问题。它是请求中空行的后面那部分。这就是它向你展示的。值得形式是以的形式提交的。传递对象的时候，默认为类型的值，与非时，的区别。如果是字符串的话，后端解析的内容时候，肯定要去解析啦。前言做过前后端联调的小伙伴，可能有时会遇到一些问题。例如，我明明传递数据给后端了，后端为什么说没收到呢？这时候可能就会就会有小伙伴陷入迷茫，本文从chrom...

Fundebug 2019-08-23 16:46 评论0 收藏0
SpringBoot 实战 (十二) | 整合 thymeleaf

摘要：数据本身没有意义，数据只有对实体行为产生影响时才成为信息。编译器在使用模板时，会根据模板实参对模板进行实例化，得到一个与类型相关的类。注解是用来获取页面表单提交的数据，并绑定到数据对象。表单定义了一个表单用于注册或修改学生信息。微信公众号：一个优秀的废人如有问题或建议，请后台留言，我会尽力解决你的问题。前言如题，今天介绍 Thymeleaf ，并整合 Thymeleaf 开发一个...

xialong 2019-08-05 18:11 评论0 收藏0