axios数据发送与后台响应
在写vue项目时,肯定会用到的就是axios。我们可以通过axios将数据从后台读取然后也可以进行数据的修改等操作。但对于没有经验的人来说,第一次使用axios的post时会出现很多意想不到的事情。下面我们通过几个简单的示例来探究以下到底如何玩转axios的数据发送。
1. 前期准备
首先,要能发送数据,那就必须先创建一个vue。下面是一个简单的例子。
<template>
<div>
<button @click="sendTo">111</button>
</div>
</template>
<script>
export default {
name: 'Test',
methods: {
sendTo () {
this.axios({
url: '/hello/',
method: 'post'
}).then(res => {
console.log('111')
}).catch(error => {
console.log('222')
})
}
}
}
</script>
注意:在axios内部是并没放置任何数据的,后面我们会仔细的讲解一下。
接下来就是配置router
const TestVue = () => import('@/views/Test')
{
path: '/test',
component: TestVue
},
最后就是在后台写一个hello视图函数
def hello(request):
print(111)
return JsonResponse({
"hello": 'hello'})
到现在为止,我们的前期工作也就完成了。
2. 实验开始
首先,我们看看这样的一个是否能调试成功
当我们按下111这个按钮之后,看下会发生什么。
可以看到,因为点击111按钮之后,我们的页面会自动跳转到后台。由于此时我们并没有发送任何数据,因此POST和body是没有任何数据的。这样的情况同样可以在开发者工具中发现。
这里并没有出现body部分。而出现两个hello/
是因为第一个请求是OPTION
的,查看该视图是否支持POST
方法(具体的在跨域问题中已经讲过)。接下来,我们在axios中添加数据查看会发生什么。
2.1 直接在axios的data中添加相关的数据
this.axios({
url: '/hello/',
method: 'post',
data: {
'hello': 'hello',
'world': 'world'
}
})
同样的,我们还是打开页面,看看会出现什么。
很奇怪,我们并没有在POST属性中看到任何数据而是只在body中存在二进制的数据。我们在回到开发者工具中看看会是什么。
可这里明明是已经发送数据的。这是为什么呢?
2.2 post提交的四种编码方式
application/x-www-form-urlencoded
这应该是最常见的post编码方式,一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。而我们在项目中都基本上使用这种方式进行提交和获取。
multipart/form-data
这也是一种比较常见的post数据格式,我们用表单上传文件时,必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。使用这种编码格式时发送到后台的数据长得像这样子 .
不同字段以–boundary开始,接着是内容描述信息,最后是字段具体内容。如果传输的是文件,还要包含文件名和文件类型信息(后面会讲这个)
application/json
axios默认提交就是使用这种格式。如果使用这种编码方式,那么传递到后台的将是序列化后的json字符串。因此如果在django后台获取到我们输入的键值对,那就必须通过``json.loads`进行获取。
text/xml
因此,当我们了解到正常情况下,post使用json方式往后台传参数,那我们就可以直接使用json.loads函数将其解开,然后在使用。
没错,这样的确是一个很好的办法,但别忘了,POST是一个非常危险的方法,接触到POST方法的必定是需要对数据库进行操作的,因此这样的情况下如果直接使用body里面的内容很容易被居心叵测的人利用。因此,我们还是希望使用request.POST.get()
进行获取对象,这样可行么?
2.3 使用application/x-www-form-urlencoded传输数据
答案是肯定的,当我们在传输数据的时候,我们可以将post的编码方式转化为application/x-www-form-urlencoded
,这样就可以直接在后台获取到该键值对。例子如下。
this.axios({
url: '/hello/',
method: 'post',
data: {
'hello': 'hello',
'world': 'world'
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded' }
})
可我们打开后台,发现POST虽然能拿到数据&#x