RequestPayload和Formdata

最新推荐文章于 2022-11-18 20:15:24 发布

weixin_33744141

最新推荐文章于 2022-11-18 20:15:24 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/zimingforever/blog/737414

本文探讨了使用Fetch API与传统Ajax在发送POST请求时的区别，特别是关于表单数据提交方式的变化，包括formdata与requestpayload的概念及其在服务器端的处理方式。

2019独角兽企业重金招聘Python工程师标准>>>

今天使用fecth做异步的服务获取，调用方法如下

  return xFetch('/api/common/getsearchowner.json',{body: JSON.stringify(para),method:'POST'});

查看前台发出的request如下

POST /api/common/getsearchowner.json HTTP/1.1
Host: localhost:8989
Connection: keep-alive
Content-Length: 11
Pragma: no-cache
Cache-Control: no-cache
authorization:
Origin: http://localhost:8989
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
content-type: text/plain;charset=UTF-8
Accept: */*
Referer: http://localhost:8989/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

且有一个request payload的值

{"aaa":111}

而以前使用ajax的时候似乎没有这个值，而是一个form data记录了post的值

csrftoken:1472039431885

formdata和requestpayload到底有什么区别呢、为什么用fecth的时候，提交的数据都变成了request payload？

对于get请求，表单参数以name=value&name1=value1的形式附到url的后面

对于post请求，表单参数是在请求体中，也是以name=value&name1=value1的形式在请求体中，并且post请求的Content-Type为application/x-www-form-urlencoded，参数是在请求体中，即请求中的Form Data。在servlet中，可以通过request.getParameter(name)的形式来获取表单参数。

但是如果是原生的ajax请求，请求的Content-Type为text/plain;charset=UTF-8，而请求表单参数在RequestPayload中。此时的POST请求是不会读取请求体数据和进行相应的参数处理的，即不会解析表单数据来放到request parameter map中。所以通过request.getParameter(name)是获取不到的。此时servelet中只能用解析流的解析

为什么原生的ajax后者fetch不能获取form data呢？

jquery在执行post请求时，会设置Content-Type为application/x-www-form-urlencoded，所以服务器能够正确解析，而使用原生ajax请求时，如果不显示的设置Content-Type，那么默认是text/plain，这时服务器就不知道怎么解析数据了，所以才只能通过获取原始数据流的方式来进行解析请求数据。

解决方案是什么呢？可以再请求的时候增加

headers: {'Content-Type': 'application/x-www-form-urlencoded'}

参考文档：http://stackoverflow.com/questions/10494574/what-is-the-difference-between-form-data-and-request-payload

http://blog.youkuaiyun.com/mhmyqn/article/details/25561535

转载于:https://my.oschina.net/zimingforever/blog/737414