axios数据发送与后台响应

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虽然能拿到数据，但不是我们的键值对：