vue前端向Django后端传输数据,最大的区别是Django后端的接收方式,下面会针对两种不同的Django后端接收方式进行说明
第一种:后端使用 json_result = json.loads(request.body)
的方法
这是vue+Django比较通用的使用方法,一般搜到的都是这种方法
前端代码样例:
export default {
data() {
return {
data: {
"name": "张三",
},
}
},
methods: {
getData1() {
axios({
url: 'Django后端路径',
method: 'post',
responseType: 'json',
data: this.data
}).then((res) => {
console.log(res, '后端返回的数据');
})
},
}
}
后端代码样例:
def get(request):
postBody = request.body
json_result = json.loads(postBody)
return JsonResponse({'name': json_result['name']})
第二种:后端使用 request.POST.get('name')
的方法
这种情况一般是别人提供的API接口传输数据时用的
vue前端数据一般是:
export default {
data() {
return {
data: {
"name": "张三",
},
}
},
}
使用 request.POST.get('name')
方法的Django后端可能最开始是给jquary前端的Ajax用的,但是Django使用 request.POST.get('name')
是无法处理这种格式的数据,又联系不到Django的开发人员做适配,这时候需要在前端对数据进行处理一下就可以了
前端代码样例:
export default {
data() {
return {
data: {
"name": "张三",
},
}
},
methods: {
let formData = new FormData()
formData.append('name', this.data.name)
getData1() {
axios({
url: 'Django后端路径',
method: 'post',
responseType: 'json',
data: formData,
}).then((res) => {
console.log(res, '后端返回的数据');
})
},
}
}
后端代码样例:
def get(request):
name= request.POST.get('name')
data_list = {'name': name}
return JsonResponse(data_list, safe=False)