wordpress 仿站 主题,公路建设网站,怎么建设自己产品网站,设计师新手接单网站Content-type的几种常见类型一、是什么#xff1f;是Http的实体首部字段#xff0c;用于说明请求或返回的消息主体是用何种方式编码#xff0c;在request header和response header里都存在。二、几个常用类型#xff1a;1、application/x-www-form-urlencoded这应该是最常见…Content-type的几种常见类型一、是什么是Http的实体首部字段用于说明请求或返回的消息主体是用何种方式编码在request header和response header里都存在。二、几个常用类型1、application/x-www-form-urlencoded这应该是最常见的post编码方式一般的表单提交默认以此方式提交$ajax默认提交就是使用这种格式。大部分服务器语言对这种方式都有很好的支持。在PHP中可以用$_POST[“key”]的方式获取到key的值在node中我们可以使用querystring中间件对参数进行分离1)浏览器的原生form表单2) 提交的数据按照 key1val1key2val2 的方式进行编码key和val都进行了URL转码POST [http://www.example.com](http://www.example.com) HTTP/1.1Content-Type: application/x-[www-form-urlencoded](http://www-form-urlencoded);charsetutf-8titletestsub%5B%5D1sub%5B%5D2sub%5B%5D32、multipart/form-data这也是一种比较常见的post数据格式我们用表单上传文件时必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。Submit请求头看起来像这样POST /foo HTTP/1.1Content-Length: 68137Content-Type: multipart/form-data; boundary---------------------------974767299852498929531610575---------------------------974767299852498929531610575Content-Disposition: form-data; namedescriptionsome text---------------------------974767299852498929531610575Content-Disposition: form-data; namemyFile; filenamefoo.txtContent-Type: text/plain(content of the uploaded file foo.txt)---------------------------974767299852498929531610575--不同字段以--boundary开始接着是内容描述信息最后是字段具体内容。如果传输的是文件还要包含文件名和文件类型信息3、application/json消息主体是序列化后的 JSON 字符串,这个类型越来越多地被大家所使用axios默认提交就是使用这种格式。POST [http://www.example.com](http://www.example.com) HTTP/1.1Content-Type: application/json;charsetutf-8{title:test,sub:[1,2,3]}这种方案可以方便的提交复杂的结构化数据特别适合 RESTful 的接口。各大抓包工具如 Chrome 自带的开发者工具、Firebug、Fiddler都会以树形结构展示 JSON 数据非常友好。4、text/xml是一种使用 HTTP 作为传输协议XML 作为编码方式的远程调用规范POST [http://www.example.com](http://www.example.com) HTTP/1.1Content-Type: text/xmlexamples.getStateName41三、axios 将post请求数据转为formdata1、后台改变接收参数的方法vue组件中axios发送post请求的代码如下this.$axios({method:post,url:/api/haveUser,data:{name:this.name,password:this.password}}).then((res){console.log(res.data);})此时控制台Network Headers里面的信息是这样子的后台接收数据需要依赖body-parser中间件我们事先装好接着在后台代码中引用body-parser这张截图中发挥作用的代码仅仅是const bodyParserrequire(body-parser);接下来在路由中使用body-parserapp.post(/api/haveUser,bodyParser.json(),function(req,res){console.log(req.body);let haveUserrequire(../api/server/user.js);haveUser(req.body.name,req.body.password,res);});这时当前台发送post请求之后后台控制台中就会打印出req.body这时通过req.body.name或者req.body.password就能拿到对应的值。这种方法比较简单也不需要前台做过多修改。2、其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前修改请求数据。这样操作之后后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: w, password: w }的对象。代码如下axios({url:/api/index/getIndexlbt,method:post,data: {relevanceId:this.$route.params.id,pictureType:4},transformRequest: [function (data) {let ret for (let it indata) {ret encodeURIComponent(it) encodeURIComponent(data[it]) }returnret}],headers: {Content-Type: application/x-www-form-urlencoded}})3、使用qs库编码数据import qs from qs;const data { bar: 123};const options {method:POST,headers: {content-type: application/x-www-form-urlencoded},data: qs.stringify(data),url,};axios(options);4、axios配置后post提交formdatavar fd newFormData()fd.append(file, files[0])let config{headers: {Content-Type: multipart/form-data}}axios.post(that.uploadUrl, fd,config).then( res{console.log(res)}).catch( res {console.log(res)})
