Django后端接收VUE前端数据的两种方法

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)

你可能感兴趣的:(笔记,后端技术,django,前端,vue.js)