国家和城乡建设部网站首页,mip网站案例,网上营销培训课程,网站用什么系统网页开发中#xff0c;向服务端提交数据是一个基本功能#xff0c;工作中会大量用 xhr/fetch 的 api 或者 axios 这种封装了一层的库来做。
可能大家都写过很多 http/https 相关的代码#xff0c;但是又没有梳理下它们有哪几种呢#xff1f;
其实通过 http/https 向服务端…网页开发中向服务端提交数据是一个基本功能工作中会大量用 xhr/fetch 的 api 或者 axios 这种封装了一层的库来做。
可能大家都写过很多 http/https 相关的代码但是又没有梳理下它们有哪几种呢
其实通过 http/https 向服务端传递数据的方式基本可以分为 5 种url param、query、form-urlencoded、form-data、json。
url param
Restful 的规范允许把参数写在 url 中比如
http://guang.zxg/person/1111这里的 1111 就是路径中的参数url param服务端框架或者单页应用的路由都支持从 url 中取出参数。
query
通过 url 中 后面的用 分隔的字符串传递数据。比如
http://guang.zxg/person?nameguangage20这里的 name 和 age 就是 query 传递的数据。
其中非英文的字符和一些特殊字符要经过编码可以使用 encodeURLComponent 的 api或者使用封装了一层的 qeury-string 库来处理。
const queryString require(query-string);queryString.stringify({name: 光,age: 20
});
//?name%E5%85%89age20通过 URL 传递数据的方式就这 2种后面 3 种是通过 body 传递数据的方式。
form-urlencoded
直接用 form 表单提交数据就是这种它和 query 字符串的方式的区别只是放在了 body 里然后指定下 content-type 是 application/x-www-form-urlencoded。 因为也是 query 字符串所以也要用 encodeURIComponent 的 api 或者 query-string 库处理下。
其实这种设计也很容易理解get 是把数据拼成 query 字符串放在 url 后面于是设计表单的 post 提交方式的时候就直接用相同的方式把数据放在了 body 里。
通过 分隔的 form-urlencoded 的方式需要对内容做 url encode如果传递大量的数据比如上传文件的时候就不是很合适了因为文件 encode 一遍的话太慢了这时候就可以用 form-data。
form-data
form data 不再是通过 分隔数据而是用 --------- 一串数字做为分隔符。因为不是 url 的方式了自然也不用再做 url encode。 form-data 需要指定 content type 为 multipart/form-data然后指定 boundary 也就是分割线。
body 里面就是用 boundary 分割线分割的内容。
很明显这种方式适合传输文件而且可以传输多个文件。
但是毕竟多了一些只是用来分隔的 boundary所以请求体会增大。
json
form-urlencoded 需要对内容做 url encode而 form data 则需要加很长的 boundary两种方式都有一些缺点。如果只是传输 json 数据的话不需要用这两种。
可以直接指定content type 为 application/json 就行 我们平时传输 json 数据基本用的是这种。
这三种是通过 body 传递数据的方式。
总结
网页开发中向服务端传送数据是一个基本功能常用的方式就 url param、query、form urlencoded、form data、json 这 5 种。
前 2 种是通过 url 传递数据的方式需要对数据做 url encode后 3 种是通过 body 传递数据。
form urlencoded 只是把 query 放在了 body 里同样需要对数据做 url encoded所以处理文件就不合适了。content type 要指定为 application/x-www-form-urlencoded
form data 是通过 boundary 分隔内容不需要做 url encode所以用来传文件很合适。但是如果不是传文件就没必要用了因为多了一些 boundary 字符串比较占空间。content type 要指定为 multipart/form-data
json 是现在最常用的传递数据的方式既不需要 url encoded又不需要加没必要的 boundary。指定 content type 为 application/json。
当然也可以指定别的 content type比如 application/xml、text/plain 等但一般不会用。
99% 情况下我们都是通过这 5 种 http/https 的提交数据的方式和服务端交互的。
