Django+Vue項目學習第六篇：vue+django發送post請求，設置不同content-type，前后端如何處理參數

傳送門：

Django+Vue項目學習第一篇：django后台搭建

Django+Vue項目學習第二篇：vue項目創建 

Django+Vue項目學習第三篇：使用axios發送請求，解決跨域問題，調通前后端 

Django+Vue項目學習第四篇：使用axios發送攜帶參數的get請求

Django+Vue項目學習第五篇：vue+django發送post請求，解決csrf認證問題

 本篇繼續介紹post請求傳遞不同類型參數時，前后端該如何處理

1、 Content-Type=application/x-www-form-urlencoded; charset=UTF-8

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()獲取具體參數的值