js_脚本之家金沙js8331

明日在对后台接口的时候,上传报名音讯,利用axios 的post央浼,发多少,

axios post提交formdata的实例,axiosformdata

vue框架推荐使用axios来发送ajax哀告,在此以前我还写过一篇博客来教学怎样在vue组件中利用axios。但在此以前做着玩用的都以get须要,未来我本人搭博客时使用了post方法,结果开采后台(node.js)完全拿不到前台传来的参数。后来进过一番探索,终于开掘难点所在。

post提交数据的七种编码情势

1.application/x-www-form-urlencoded

js_脚本之家金沙js8331。那应当是最广大的post编码情势,日常的表单提交暗中同意以此措施提交。超越二分一服务器语言对这种措施都有很好的支撑。在PHP中,能够用$_POST[“key”]的章程获得到key的值,在node中大家得以行使querystring中间件对参数举行分离

app.post("/server",function(req,res){
 req.on("data",function(data){
 let key=querystring.parse(decodeURIComponent(data)).key;
 console.log("querystring:"+key)
 });
});

2.multipart/form-data

那也是一种比较广泛的post数据格式,大家用表单上传文件时,必得使form表单的enctype属性可能ajax的contentType参数等于multipart/form-data。使用这种编码格式时发送到后台的数据长得像那标准

金沙js8331 1

昨今差别字段以–boundary早先,接着是内容陈述音讯,最后是字段具体内容。要是传输的是文本,还要包涵文件名和文件类型新闻

金沙js8331,3.application/json

axios暗中同意提交就是接收这种格式。即便应用这种编码方式,那么传递到后台的将是体系化后的json字符串。我们能够将application/json与application/x-www-form-urlencoded发送的数据开展相比较

首先是application/json:

金沙js8331 2

接着是application/x-www-form-urlencoded:

金沙js8331 3

此处能够一望而知看出application/x-www-form-urlencoded上传出后台的多少是以key-value情势举办集体的,而application/json则一向是个json字符串。借使在拍卖application/json时后台依然选用对付application/x-www-form-urlencoded的诀窍将会生出难题。

诸如后台node.js依然接纳早前对付application/x-www-form-urlencoded的格局,那么querystring.parse(decodeU卡宴IComponent(data卡塔尔(قطر‎卡塔尔国之后收获的数量是那样子的

金沙js8331 4

其不时候再querystring.parse(decodeUEvoqueIComponent(dataState of Qatar卡塔尔国.key只可以获得到undefined

4.text/xml

余下的一种编码格式是text/xml,这种格式笔者从不怎么选取过

解决方法

既然如此大家知道axios
post方法默许使用application/json格式编码数据,那么建设方案就有二种,一是后台改造选用参数的章程,另一种则是将axios
post方法的编码格式修正为application/x-www-form-urlencoded,这样就不须要后台做怎么样修改了。

先来看率先种缓慢解决办法

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里面包车型大巴音信是这样子的

金沙js8331 5

后台接受数据要求信赖body-parser中间件,大家先行装好,接着在后台代码中援用body-parser

金沙js8331 6

那张截图中,发挥功用的代码仅仅是const bodyParser=require(“body-parser”卡塔尔;

接下去在路由中应用body-parser

app.post("/api/haveUser",bodyParser.json(),function(req,res){
 console.log(req.body);
 let haveUser=require("../api/server/user.js");
 haveUser(req.body.name,req.body.password,res);
});

这个时候,当前台发送post须要之后,后台调控嘉义就能打印出req.body

金沙js8331 7

那儿,通过req.body.name可能req.body.password就能够获得对应的值。

这种情势比较简单,也不须求前台做过多改正,推荐应用这种办法。

其次种减轻方法,具体操作如下

前端

this.$axios({
 method:"post",
 url:"/api/haveUser",
 headers:{
 'Content-type': 'application/x-www-form-urlencoded'
 },
 data:{
 name:this.name,
 password:this.password
 },
 transformRequest: [function (data) {
 let ret = ''
 for (let it in data) {
  ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
 }
 return ret
 }],
}).then((res)=>{
 console.log(res.data);
})

其间表明关键功能的是headers与transformRequest。此中 headers
是设置就要被发送的自定义乞求头。 transformRequest
允许在向服务器发送前,修改诉求数据。那样操作之后,后台querystring.parse(decodeU讴歌ZDXIComponent(data卡塔尔(قطر‎卡塔尔国获取到的就是看似于{
name: ‘w’, password: ‘w’ }的对象。

后台代码如下

app.post("/api/haveUser",function(req,res){
 let haveUser=require("../api/server/user.js");
 req.on("data",function(data){
  let name=querystring.parse(decodeURIComponent(data)).name;
  let password=querystring.parse(decodeURIComponent(data)).password;
  console.log(name,password)
  haveUser(name,password,res);
 });
});

这种方式显著将要比第一种麻烦一点,但无需后台做过多管理。所以具体操作依然得依照真实情况决定。

如上那篇axios
post提交formdata的实例正是小编分享给大家的全体内容了,希望能给大家二个参照,也期待大家多多指教帮客之家。

post提交formdata的实例,axiosformdata
vue框架推荐使用axios来发送ajax乞请,早先本人还写过 一篇博客
来说解怎么着在vue组件中利用axios。但从前…

可是来得参数错误,但是查看header的时候,发掘仍是一个目的:

那可丰裕,然会就想着怎么把对象搞成formdata,间接投入两段代码就好,

 transformRequest: [function  { let ret = '' for  { ret += encodeURIComponent + '=' + encodeURIComponent + '&' } return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

最后在header查看的时候,就是瓜熟蒂落了,

如上那篇axios
达成post央求时把对象obj数据转为formdata正是作者分享给大家的全体内容了,希望能给我们四个参照,也盼望大家多都赐教脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注