微信小程序Post方法提交数据

问题描述

微信小程序使用POST方法向Spring Boot 后端提交数据,但是后端无法得到期待的数据;

后端Controller方法使用@RequestBody注解DTO,前端需要传入JSON字符串参数,然后Spring MVC完成JSON字符串和DTO的转换;后端接收到了数据,但是字段全部为null;

后端Controller方法已经通过postman测试;

场景还原

//微信小程序请求代码:
let obj=new Object();
//....设置obj的属性
wx.request({url:"url",method:"POST",data:{"dtoName":obj}
});
//Spring Boot后端Controller方法
@PostMapping("add")
public Result addDTO(@RequestBody DTO dto){return dtoService.save(dto);
}

问题分析

后端代码不存在功能性缺陷,通过调试发现接收到参数,并且进入了Service层,所以问题应该在微信小程序发送的数据不合适,也就是微信小程序发送数据的格式或者发送数据的方式不是后端期待的方式;

问题解决

百度后,发现有一种做法是当请求方法为POST时,指定content-type的值为“application/x-www-form-urlencoded”;但是这时后台会报415错误:

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

所以,content-type的值只能为application/json,这是因为我们使用了@RequestBody注解,Spring MVC只有在content-type为application/json的时候才会做转换,否则就报“Unsupported Media Type”的415错误;

去微信小程序官网文档查看wx.request的用法,知道content-type的默认值为"application/json";也就是将对数据进行 JSON 序列化;这说明小程序端发送数据的方式没有问题;因为会“对数据进行 JSON 序列化”,那么数据自然就是data对象;我们的data实际上这样一个对象:它有一个“dtoName”的属性,其值为我们构造的对象;这样就能解释为什么接收到数据(说明媒体类型是合适的),但是字段全部为null,也就是发送数据的格式有问题;修改如下:

wx.request({url:"url",method:"POST",data:{fieldOne:"value",fieldTwo:"value"}
});

这样就解决了使用@RequestBody注解,接收到数据字段为null的问题;

涉及原理

实际上,POST提交数据时可以有多种格式:form-data、x-www.form-urlencodeed、raw、binary等;@RequestBody注解正是指示框架将body里的内容按照JSON字符串解析成相应对象,所以当content-type不是application/json的请求到达时,自然不能处理,报错415;值得一提的是,使用postman测试的时候正是指定post的格式为raw;另外,即便使用“application/x-www-form-urlencoded”的方式,data的格式仍然需要为键值对;

官方文档中的说明如下:

最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下:
对于 GET 方法的数据,会将数据转换成 query
string(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…) 对于 POST 方法且 header[‘content-type’] 为 application/json 的数据,会对数据进行 JSON
序列化 对于 POST 方法且 header[‘content-type’] 为
application/x-www-form-urlencoded 的数据,会将数据转换成 query string
(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…)

所以,我们也可以直接将一个JSON字符串传递给data,以实现提交JSON数据的需求(比如提交数组时,并不需要手动构造data的键值对,只需要将数组转换为JSON字符串,传递给data即可);

总而言之,data的构造方式应该同小程序发送方式(json还是x-www-form-urlencoded)以及后端接收方式相一致;

微信小程序Post方法提交数据相关推荐

  1. 使用TypeScript开发微信小程序的方法

    TypeScript是C#之父Anders Hejlsberg的又一力作,很多喜欢c#语法的朋友对typescript都爱不释手,今天小编给大家介绍下TypeScript开发微信小程序的方法,感兴趣的 ...

  2. 微信小程序setdata方法

    微信小程序setdata方法 微信小程序中有时候需要从其他位置获取数据在前端调用 一般会用到小程序中封装好的setdata方法: /** `setData` 函数用于将数据从逻辑层发送到视图层*(异步 ...

  3. 微信小程序自定义组件-树形数据表格(进阶版)

    前言 一.下载引用 二.使用treegrid组件 三.使用文档 属性 事件 四.组件源码 利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...

  4. 微信小程序读取NFC卡片数据,NDEF-M1

    最近来了个离谱的需求,要用微信小程序读写NFC卡数据,微信官方文档可以说是垃圾的一批了,啥都没有,踩了好几天坑把整体思路记录一下. 首先调用微信自带的方法 const adapter = wx.get ...

  5. 微信小程序getday方法_日期getDay()方法和JavaScript中的示例

    微信小程序getday方法 JavaScript Date getDay()方法 (JavaScript Date getDay() method) getDay() method is a Date ...

  6. 微信小程序怎么开通(自己申请开通微信小程序的方法)

    微信小程序怎么开通(自己申请开通微信小程序的方法) 很多粉丝朋友想要了解微信小程序怎么开通,自己想要申请开发同微信小程序.本文瀚林就给大家分享自己开通微信小程序的方法. 在操作之前,首先要大家清楚明白 ...

  7. uniapp 微信小程序登录方法封装

    uniapp 微信小程序登录方法封装 前言 一.登录接口 二.登录 上代码 总结 前言 ui设计没有登录页所以将微信小程序登录方法同一封装一个方法 一.登录接口 uni.getUserProfile ...

  8. 微信小程序云开发之数据分页云函数

    微信小程序云开发之数据分页云函数 2018-10-06 20:23:28       微信小程序的云开发可以自己对数据库进行操作而不需要后台,那么很常见的一个功能就是我们在读取数据的时候需要分页来获取 ...

  9. 【微信小程序提取公共请求数据】

    [微信小程序提取公共请求数据] 在utils下设置一个http.js const url = 'https://api.shop.eduwork.cn'; const request = (path= ...

  10. uniapp开发微信小程序 wx.navigateBack()携带数据问题

    uniapp开发微信小程序 wx.navigateBack()携带数据问题 某个表单页面 有时需要跳转另一个页面查询数据 但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...

最新文章

  1. Velocity判断空的方法
  2. C陷阱与缺陷的学习笔记
  3. struts实战--登录功能实现
  4. C#可空类型(Nullable Types)
  5. linux强制将数据写入磁盘,防止丢失内存的数据
  6. 7-4 特殊数字 (10 分)
  7. iOS- 非整星的评分控件(支持小数)
  8. java围棋毕业设计_(毕业论文)围棋游戏的设计与实现.doc
  9. 喜讯 | 大势智慧获得全球软件领域最高权威CMMI5认证
  10. 18 个开源翻译工具帮助你的项目本地化
  11. matlab中dcd是什么,dcd是什么意思
  12. vue项目中金额小写转换为汉字大写的功能封装
  13. 1000+常用Python库
  14. 主力用计算机吸筹,主力底部吸筹 副图
  15. 通过access口加vlan标签吗_VLAN标签处理过程
  16. indesign选中不了图片删除_图片神器XnView教程、方法和技巧汇总
  17. pygraphviz win7安装报错解决
  18. 淘宝宝贝标题的优化设置技巧
  19. 一篇文带你使用vue完成一个完整后台
  20. 所见即所得编辑器_Froala所见即所得编辑器

热门文章

  1. SNDA校园招聘,参加哈尔滨和西安的面试
  2. xp怎样修改计算机mac地址,xp系统怎么修改mac地址
  3. 返利平台php,MallWWI新模式返利商城系统 php版 v1.2.7
  4. vue axois 封装请求 | vue 解决跨域问题
  5. 个人网站怎么建设,个人网站建设流程
  6. word 2016 页码从任意页开始
  7. 工商服务代理行业解决方案
  8. python 占用内存过高_PyCharm如何优化?太占内存了,太慢了
  9. 【可视化分析】雷达图
  10. 平面中圆与矩形相交判定