Django Python: Can't access JS object passed via AJAX from Python QueryDict

Question

In this Django project I'm building, I have data going back and forth between server and client via javascript and python using AJAX. For convenience I devised a config object in JS to carry over important parameters the server and responding JS need to know. On the Python side I am unable to access this object because it is None, but printing the object out to the JS console before sending and printing the POST object out to the Py console both show something is there. I don't understand why accessing the JS object (not it's memebers) in the QueryDict comes back as None.

# JavaScript   

var objConfig = {
   param1: "more text data",
   param2: "more text data",
   param3: "more text data",
};

console.log(objConfig);

$.ajax({
   type: "POST",
   url: url,
   data: {
      csrfmiddlewaretoken: strCsrfToken,
      strTextData: strTextData,
      objConfig: objConfig
   },
   success: callback
});

# JS console output:
# Object {param0: "more text data", param1: "more text data", param2: "more text data"}


# Python
def DoTheThing(response):
   print(response.POST.get('strTextData'))
   print(response.POST.get('objConfig'))
   print(response.POST)
   print(response.POST.get('objConfig[param0]'))

# Python console output:
# Text data being sent to server.
# None
# <QueryDict: {'csrfmiddlewaretoken': ['...'], 'strTextData': ['Text data being sent to server.'], 'objConfig[param0]': ['more text data'], 'objConfig[param1]': ['more text data'], 'objConfig[param2]': ['more text data']}>
# more text data

Notice how print(response.POST.get('objConfig')) prints None, but print(response.POST.get('objConfig[param0]')) prints exactly what I'd expect. I have also noticed in the QueryDict that it doesn't seem to have objObject represented as an object like how I was expecting. I understand to due differences between JS and Py objects, but it has each member of the object listed individually using an array index operator which I'm not sure why or how to use properly.

I can't just get the whole objConfig object, I need to access each member individually? Also how would this work trying to send objConfig in an HttpResponse? I devised the this kind of object pattern to save time and text space writing out each parameter individually for how I want this data to be handled going between server and client.

Answer 1

The default Content-Type of $.ajax() is 'application/x-www-form-urlencoded; charset=UTF-8' the issue should be solved if you change it to application/json.

Example:

var data = {
    strTextData: strTextData,
    objConfig: objConfig
}

$.ajax({
   type: "POST",
   url: url,
   contentType : "application/json; charset=utf-8",
   headers: { "X-CSRFToken": strCsrfToken },
   data: JSON.stringify(data),
   success: callback
});

Check more info on the Jquery documentation

On you view you should:

import json
...
# on the view
data = json.loads(request.body)