出现这个问题是因为没有搞清楚Django中获取表单数据和字符串数据的两种方式。下面我们就来梳理下Django的接收值的方式和vue的传值方式。

Django接收表单数据

在 Django 中，你可以通过 request.POST 来获取这些数据

def my_view(request):
    if request.method == 'POST':
        key1 = request.POST.get('key1')
        key2 = request.POST.get('key2')
        # 处理接收到的数据

Django接收字符串json数据

在 Django 中，你可以通过 request.body 来获取这些数据，并使用 json.loads 方法将其解析为 Python 字典

import json

def my_view(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        username = data.get('username')
        password = data.get('password')
        # 处理接收到的数据

# 打印request.body是下面的数据
b'{"username":"zhangsan","password":"111"}'

Vue中传递json格式数据

这种形式的数据，应该是最常见的。一般在前端，我们都是将参数以json的形式传到后端。

import axios from 'axios';

const formData = {
  'username': form.value.username,
  'password': form.value.password,
};

axios.post('http://your-django-api-url.com/endpoint/', formData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

axios中默认的content-type是application/json;charset=utf-8,这样数据将会以json的格式传到后端

Vue中发送表单数据

要在 Vue 中使用 Axios 发送表单数据，并通过设置请求头的方式通知 Django 接收到的数据是表单数据，需要使用 Content-Type 头部来指定数据格式为 application/x-www-form-urlencoded

import axios from 'axios';

// 创建一个对象来表示表单数据
const formData = new URLSearchParams();
formData.append('username', form.value.username);
formData.append('password', form.value.password);

// 发送 POST 请求并设置请求头
axios.post('http://your-django-api-url.com/endpoint/', formData, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

首先创建了一个 URLSearchParams 对象 formData，并使用 append 方法向其中添加了键值对。然后，在发送 POST 请求时，我们通过 headers 选项设置了 Content-Type 头部为 application/x-www-form-urlencoded，这样 Django 就会知道接收到的数据是表单数据。

顺便这里总结下常见的三种Content-Type头部设置

// 请求体中的数据会以json字符串的形式发送到后端
'Content-Type: application/json'
// 请求体中的数据会以普通表单形式（键值对）发送到后端
'Content-Type: application/x-www-form-urlencoded'
// 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件
'Content-Type: multipart/form-data'