0、干貨先寫在前

1、前端傳值的數(shù)據(jù)必須使用JSON.stringify()傳化

2、后端，通過request.body接收數(shù)據(jù)，直接使用json.loads解析，解析前，先decode一下：receive_data = json.loads(request.body.decode())。如果使用simplejson.loads(request.body)，就不用decode()

下面是這個問題產(chǎn)生及解決的過程，還有一些可能的應(yīng)用場景。

1、傳統(tǒng)方式解析表單數(shù)據(jù)

之前用Django后臺接收數(shù)據(jù)的時候，一直采用的是表單的形式，通過Ajax傳值的時候也是一樣，直接通過鍵值對兒將值傳遞給后臺，前端代碼類似這樣：

$.post("/login/",
    {
    "user":"threedog",
    "password":"123456"
    },
    function (res) {
      console.log(res)
  });

在后臺采用`request.POST`進(jìn)行數(shù)據(jù)接收：

class Login(View):
  def get(self,request):
    return render(request,'login.html')
 
  def post(self,request):
    print(request.POST)
    print("user :",end='')
    print(request.POST.get('user',None))
    print("password :",end='')
    print(request.POST.get('password',None))
    return HttpResponse('OK')

后臺接收到的是一個QueryDict，打印如下：

可以看到這里的數(shù)據(jù)是按照J(rèn)son的格式傳遞的，后臺也完美地進(jìn)行解析，但是，如果前端傳遞的數(shù)據(jù)為嵌套的Json，這種寫法就開始出現(xiàn)問題！

2、解析嵌套的Json數(shù)據(jù)

前端代碼修改如下：

$.post("/login/",
    {
    "user":{
      'name':'threedog',
      'age':18,
      'sex':'男'
    },
    "password":"123456"
    },
    function (res) {
      console.log(res)
  });

這個時候后臺收到的東西就有意思了：

password取值正常，但是user沒能拿到值，而QueryDict的打印我們發(fā)現(xiàn)，原本是嵌套的字典，現(xiàn)在全部由兩個鍵名合并成了新的鍵諸如：'user[sex]'，'user[age]'。這樣的鍵到了后臺是沒辦法按照普通字典或者json來進(jìn)行解析的。

上網(wǎng)查，說是要使用request.raw_post_data代替request.POST就可以，然而很遺憾，報錯再查之下發(fā)現(xiàn)，raw_post_data在Django1.4版本之后被取消，我使用的是Django1.11。再往下查，知道了要使用request.body，還要通過simplejson來解析。

但是request.body的解析仍然不順利，前端不變，后臺直接打印request.body的結(jié)果如下：

一個包含了鍵值對兒的二進(jìn)制字符串，這個時候按網(wǎng)上的辦法使用simplejson.loads()解析會報錯：simplejson.errors.JSONDecodeError: Expecting value: line 1 column 1 (char 0)。不用在這個上面糾結(jié)了，simplejson直接解析不了這個body。

后來靈感突發(fā)，發(fā)現(xiàn)前端在給出的數(shù)據(jù)原本就是JS中的object，并不是json的字符串，所以把前段的數(shù)據(jù)使用JSON.stringify()進(jìn)行轉(zhuǎn)換后，打印request.body以及通過simplejson.load()解析發(fā)現(xiàn)了令人驚喜的輸出：

到了這一步就基本不用說啥了，完整接收了前端的json字符串并解析，這里如果不想安裝第三方庫simplejson的話，使用python自帶的json模塊也是可以解析的，只是在解析時需要將request.body進(jìn)行一次decode()即可。完整代碼如下

前端：

$.post("/login",
    JSON.stringify({
    "user":{
      'name':'threedog',
      'age':18,
      'sex':'男'
    },
    "password":"123456"
    }),
    function (res) {
      console.log(res)
  });

后臺：

class Login(View):
  def get(self,request):
    return render(request,'login.html')
 
  def post(self,request):
    print(request.body)
    receive_data = simplejson.loads(request.body)
    print(receive_data)
    receive_data = json.loads(request.body.decode())
    print(receive_data)
    return HttpResponse('OK')

程序輸出：

之前主要是因為寫前端給數(shù)據(jù)的時候沒有使用JSON.stringify()進(jìn)行處理。導(dǎo)致后臺無論什么方法解析都是一團(tuán)糟。

3、簡述應(yīng)用場景

這個應(yīng)用場景非常常見，除了我剛才提到的，前端給后臺的，是嵌套的json數(shù)據(jù)的情況。還有微信小程序給后臺數(shù)據(jù)，也需要JSON.stringify()處理給json，還有安卓，IOS app訪問網(wǎng)站后臺提交數(shù)據(jù)，都需要這種方式傳值和解析。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論