http请求之关于content-type的一些介绍

在jquery+ajax盛行的年代里，前后端交互实在太方便了，ajax发起一个请求就是这么简单

$.ajax({
    url:'',
    type:'post',
    data:{},//参数
    ...
})

久而久之，里面很多的细节都被我们忽略了，等到有一天，没有jquery ajax的时候，咦？怎么发起一个请求死活不成功，参数明明传递过去了，抓包都没有问题，但是后台就是取不到值，为何为何？因为任何请求的发起和接收，都需要前后端配合的，参数可能发了一个表单数据，可能是一个json对象，可能是一个字符串，后台怎么知道你发的是啥呢，我们会问，以前那么简单也没出问题啊，对，那是因为‘封装’了。发起一个请求，是需要设置请求头的，告诉服务端我们需要干嘛，接下来我们就先来详细介绍一下一个重要的请求头，content-type。
content-type请求头是干吗的呢，http请求头有四种类型，分别是通用头部，请求头部，响应头部以及内容头部，首先，我们要弄清楚，content-type是属于内容头部，既然是内容头部，那这个请求头是用来向接收端解释传递的该内容主体的，content-type的取值是告诉服务端，你传递过去的内容是啥，你应该准备好如何接收，这里，我们重点剖析一下其中几个取值，’application/json’,’application/x-www-form-urlencoded’,’multipart/form-data’。
既然不同的类型，服务端接收方式是不同的，那前端发送方式必然也是有区别的咯，接下来一一作说明。
首先，content-type的值是application/json的情况，传递的是一个json对象，并不是直接丢一个对象过去，需要进行序列化，JSON.stringify(data);如下图：

再说说application/x-www-form-urlencoded的情况，最终还是表单提交的形式，例如我们发送一个登录请求，参数是{user:1234,pwd:1234},最终提交服务器的是user=1234&pwd=1234。如下图：

对比一下以上两个图片，请求的参数那一部分，是否有差别。
接下来说说multipart/form-data，这种方式提交的时候，参数会被分割成多块，每一个参数块都有自己独立的content-type，这种方式可以用于提交普通表单和文件上传。
到此为止基本介绍完了前端请求提交参数的部分，那服务器应该怎么接收呢，并不是默认支持所有这些方式的，接下来服务端的接收以node服务器进行举例，前两种方式提交的参数，需要用到bodyParser这个中间件，其中bodyParser.json()是用于application/json方式的参数解析，至于multipart/form-data这种方式，也需要新的中间件connect-multiparty来支持。
所以，等到我们后台开发完毕的时候，请明确地告诉服务端该用哪种请求方式，很多时候，我们不用管辣么多，是因为服务端封装好了支持，客户端也封装好了支持，但是一旦从0开始呢，这个细节就很关键了。

---

个人简介：
前端小司机，倒腾前端一切，砸尽一切非前端的饭碗。
有兴趣请加前端交流群