手机版

详细说明vue axios随帖提交的数据格式

时间:2021-08-30 来源:互联网 编辑:宝哥软件园 浏览:

vue框架建议使用axios发送ajax请求。我还写了一篇博客来解释如何在vue组件中使用axios。但在此之前,我所做的只是获得请求。现在,当我建立自己的博客时,我使用了post方法,发现后台(node.js)无法从前台获取参数。经过一番探索,我终于发现了问题所在。

提交后数据的四种编码方法

1.application/x-www-form-urlencoded

这应该是最常见的后期编码方式,一般表单提交默认提交。大多数服务器语言都很支持这种方法。在PHP中,您可以通过$ _ post[“key”]来获取key的值,我们可以使用querystring中间件来分离节点中的参数

app.post('/server '、function(req,res){ req.on('data '、function(data){ let key=querystring . parse(decodeURIComponent(data))。钥匙;console.log('querystring: '键)});});2.multipart/form-data

这也是一种常见的帖子数据格式。当我们上传带有表单的文件时,我们必须使表单表单的enctype属性或ajax的contentType参数等于multipart/form-data。使用这种编码格式时,发送到后台的数据如下所示

不同的字段以- boundary开始,然后是内容描述信息,最后是字段的具体内容。如果要传输文件,还应该包括文件名和文件类型信息

3.application/json

Axios默认提交使用这种格式。如果使用此编码方法,序列化的json字符串将被传递到后台。我们可以比较应用程序/json和应用程序/x-www-form-urlencoded发送的数据

首先是application/json:

然后是应用程序/x-www-form-urlencoded:

这里可以清楚地看到,application/x-www-form-URL encoded上传到后台的数据是以键值的形式组织的,而application/json直接就是一个json字符串。如果后台在处理application/json时仍然采用处理application/x-www-form-URL encoded的方式,就会出现问题。比如在后台,node.js仍然采用之前处理application/x-www-form-URL encoded的方法,所以在query string . parse(decoderuicomponent(data))后得到的数据是这样的

此时,query string . parse(decoderuicomponent(data))。密钥只能未定义

4.text/xml

剩下的编码格式是text/xml,这是我不常使用的

解决办法

既然知道axios post方法默认使用application/json格式对数据进行编码,那么有两种解决方案,一种是在后台更改接收参数,另一种是将axios post方法的编码格式修改为application/x-www-form-URL encoded,无需在后台修改。我们先来看第一个解决方案

在vue组件中,axios发送post请求的代码如下

这个。$axios({ method:'post ',url:'/api/haveUser ',data : { name : thi . name,password : thi . password } })。然后((RES)={ console . log(RES . data);})此时,控制台网络标题中的信息如下所示

在后台接收数据依赖于body-parser中间件。我们提前安装它,然后在后台代码中引用主体解析器

在这个截图中,唯一有效的代码是const body parser=require(‘body-parser’);

接下来,在路由中使用主体解析器

app.post('/api/haveUser ',bodyParser.json(),function(req,RES){ console . log(req . body);让haveUser=require('./API/server/user . js ');haveUser(req.body.name,req.body.password,RES);});此时,前站发送post请求后,req.body将打印在后控制台中

此时,可以通过req.body.name或req.body.password获取相应的值.

这个方法比较简单,不需要在前台做太多修改。建议使用这种方法。

第二种解决方案如下

前端

这个$axios({ method:'post '、url:'/api/haveUser '、标头RS : { ' Content-type ' : ' application/x-www-form-URL encoded ' })、数据: { name : thi。name、password:this.password }、transform request 3360[函数(数据){ let ret=' ' for(让它输入数据){ ret=encodeURIComponent(it)'=)然后((RES)={控制台。日志(资源数据);})其中发挥关键作用的是头球与transformRequest。其中头球是设置即将被发送的自定义请求头转换请求。允许在向服务器发送前,修改请求数据。这样操作之后,后台查询字符串。解析(DecoDeuriComponent(数据))获取到的就是类似于{ name: 'w ',password: 'w' }的对象。后台代码如下

app.post('/api/haveUser ',函数(req,res){让haveUser=require('./API/服务器/用户。js’);req.on('data ',function(data){ let name=查询字符串。解析(DecoDeuriComponent(数据)).姓名;让password=querystring。解析(decodeURIComponent(数据)).密码;console.log(名称、密码)haveUser(名称、密码、RES);});});这种方法明显就要比第一种麻烦一点,但不需要后台做过多处理。所以具体操作还是得根据实际情况决定。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

版权声明:详细说明vue axios随帖提交的数据格式是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。