Django+Vue项目学习第六篇：vue+django发送post请求，设置不同content-type，前后端如何处理参数

冰霜

发布于 2022-03-15 15:45:40

9370

发布于 2022-03-15 15:45:40

1. Content-Type=application/x-www-form-urlencoded

vue代码做如下修改

let payload1 = {  num: this.num1,}
axios({
          method: "post",
          headers: {
            'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
            'X-CSRFToken': csrf_token,
          },
          data: Qs.stringify(payload1),  //发送post请求，使用data关键字接收请求参数
          url: url2 + "/create_data/id"
        }).then(res => {
          this.info = res.data
          console.log(res)
        })

(1) headers中指明了 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'；

(2) 使用data关键字接收请求参数，并且使用 Qs.stringify() 对参数做了序列化处理；

django后端代码处理

def id(request):
    
    num = request.POST.get("num")  # "Content-type","application/x-www-form-urlencoded"
    print(num)
    if num == "" or num is None:
        data1 = create_id(5)
    else:
        data1 = create_id(num)
    return HttpResponse(data1)

使用 request.POST.get("num") 获取前端请求中的参数

2. Content-Type=application/json

vue代码做如下修改

let payload1 = {
  num: this.num1,
  // csrfmiddlewaretoken: sessionStorage.getItem("csrf_token")
}
axios({
          method: "post",
          headers: {
            'Content-Type':'application/json',
            'X-CSRFToken': csrf_token,
          },
          data: payload1, // 也可以使用 JSON.stringify(payload1)
          url: url2 + "/create_data/id"
        }).then(res => {
          this.info = res.data
          console.log(res)
        })

(1) headers中指明了 'Content-Type':'application/json'；

(2) 使用data关键字接收请求参数，参数部分可以不做处理，直接放{"xx":xx}这种格式；也可以使用 JSON.stringify(payload1)做一下处理

django后端代码处理

@require_http_methods(['GET', 'POST'])
def id(request):
    
    num = json.loads(request.body).get("num") # "Content-type","application/json"
    print(num)
    if num == "" or num is None:
        data1 = create_id(5)
    else:
        data1 = create_id(num)
    return HttpResponse(data1)

先使用request.body获取请求体，然后用json.loads()解析，然后使用.get()获取具体参数的值