创建企业网站的步骤,怎么建网页,军事人才招聘网官网2023岗位表,梧州零距离网论坛前言
做过前后端联调的小伙伴#xff0c;可能有时会遇到一些问题。例如#xff0c;我明明传递数据给后端了#xff0c;后端为什么说没收到呢#xff1f;这时候可能就会就会有小伙伴陷入迷茫#xff0c;本文从chrome-dev-tools#xff08;F12调试器#xff09;中看到的F…前言
做过前后端联调的小伙伴可能有时会遇到一些问题。例如我明明传递数据给后端了后端为什么说没收到呢这时候可能就会就会有小伙伴陷入迷茫本文从chrome-dev-toolsF12调试器中看到的FormData与RequestBody给小伙伴们提供一种可能的思路。也给小伙伴们提供一些问题的探究方法。
简介
什么是FormData什么是RequestPayload不解释直接上图
区别
因为这里触及了我的知识盲区所以有了本文。这个答案是我在stackoverflow上得到的。首先还是贴问题贴答案。 What’s the difference between “Request Payload” vs “Form Data” as seen in Chrome dev tools Network tab。 中文翻译chrome开发者工具中的Request Payload与Form Data有什么区别 Request Payload更准确的说是http request的payload body。一般用在数据通过POST请求或者PUT请求。它是HTTP请求中空行的后面那部分。PS:这里涉及一个http常被问到的问题http请求由哪几部分组成一般是请求行请求头空行请求体。payload body应该是对应请求体。
一个请求伴随着header设置为Content-Type: application/json时候看起来可能像这样
POST /some-path HTTP/1.1
Content-Type: application/json{ foo : bar, name : John }如果你正常请求一个ajax。浏览器会简单的将你提交的内容作为payload展示出来这就是它所能做的因为它不知道数据来自哪里。
如果你提交了一个html表单并且配置上了method“post”并且设置了Content-Type: application/x-www-form-urlencoded或者Content-Type: multipart/form-data。那么你的请求可能长这个样
POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencodedfoobarnameJohn这里的form-data就是request payload。在这里浏览器知道更多它知道bar是提交表单的输入字段foo的值。这就是它向你展示的。
所以区别就是他们只是因为Content-Type设置的不同并不是数据提交方式的不同这两种提交都会将数据放在message-body中。但是chrome浏览器的开发者工具会根据这个ContentType区分显示方式。
细节
好了到这里我们知道了其实都是放到了payload中。那么具体有什么区别呢为什么有时候后端拿不到值呢这就不得不说对payload的解析方式了。我们以几个chrome下的测试案例来理一理这个逻辑。
传统的Form表单提交
场景构造
form action/ methodPOSTinput namename typetextinput namepassword typetextbutton提交/button
/form如果我这里点击提交按钮就会触发浏览器的提交功能那结果是什么样呢 注意点
可以看到Content-Type为application/x-www-form-urlencoded。 值得形式是以key1value1key2value2的形式提交的。
传统的ajax提交
场景构造
function submit2() {var xhr new XMLHttpRequest();xhr.timeout 3000;var obj {a: 1, b: 2};xhr.open(POST, /);xhr.send(obj);
}首先我们构造一个简单的函数然后触发它。通过chrome反馈来看 注意点
1.默认的Content-Type为text/plain。 2.Request Payload会对非字符串做字符串转换。 3.通过xhr.send(JSON.stringify(obj));可修正要发的内容
axios方式提交
场景构造
由于axios已经是vue、react的准标配请求方式了所以这里探究一下它。
首先我门看axios的文档当post提交时候可以传递什么类型参数 注意这个类型我们分别构造两个场景。对应它。
function submit3() {var sence1 name123val456;var sence2 {name: 123, val: 456};axios.post(/, sence1)
}分别传递字符串与对象提交post请求然后观察结果:
场景1——传递字符串时候的结果 场景2——传递对象的结果 注意点
1.当我们传递字符串的时候Content-Type自动转为xxx-form-xxx的形式。当为对象的时候自动转化为xxx/json。
2.字符串的时候以key1val1key2val2的形式体现对象以JSON字符串形式体现。
总结
探索了这么多种情况之后那么我们回顾一下
Content-Type的差异
1.传统的ajax请求时候Content-Type默认为文本类型。 2.传统的form提交的时候Content-Type默认为Form类型。 3.axios传递字符串的时候Content-Type默认为Form类型。 4.axios传递对象的时候Content-Type默认为JSON类型
Content-Type的值Form与非Form时payload的区别。
1.都只支持字符串类型(以上探究的几种情况) 2.Form需要传递的格式为key1value1key2value2,类似GET请求的QueryString格式 3.非Form一般为JSON.stringify(formDataObject)形式
后端取不到值
无论何种形式传递后端解析表单信息的时候会考虑Content-Type。如果是JSON字符串的话后端解析payload的内容时候肯定要去解析JSON啦。如果是key1value1key2value2的形式则需要去分割字符串。
当然这些事情一般后端使用的框架会去处理但是框架给后端提供取值接口有可能是不同的所以前端的小伙伴在处理请求问题时一定要跟后端小伙伴商量好是用JSON还是FormData哈。
