Passing a dict of dict with Ajax

Question

I'm working on a website running on Django. I need to pass data from the Javascript to my Python code with Ajax.

Here's my code:

// Javascript file
   function myFunc() {
        {...} // Generate var 'values' which is a dict of dict {{},{}...}
        console.log(JSON.stringify(values));
        $.ajax({
                url : "holt/",
                type : "POST",
                data : values,
                success : function (json) {
                   console.log(json)
                },
                error : function () {
                    alert("Error Ajax");
                }
            })
    }

My view in python:

  class getHolt(TemplateView):
        def get(self, request, *args, **kwargd):
            pass 
        def post(self, request, *args, **kwargd):
            if request.user.is_authenticated():
                data = dict(request.POST)
                h = Holt(data)
                response_data, success = h.get_holt(2021, no_freeze=True)
                return HttpResponse(
                    json.dumps(response_data),
                    content_type="application/json"
                )

However when I run this, with:

Javascript values

values= {
    "1":{"data_2013":"49105","data_2014":"92620","data_2015":"30000","data_2016":"1945000"},
    "2":{"data_2013":"2885906","data_2014":"2876120","data_2015":"2882653","data_2016":"2787520"},
    "3":{"data_2013":"29201124","data_2014":"29470635","data_2015":"29383195","data_2016":"30154361"}}

I receive this in my Python code:

print request.POST

< QueryDict: {u'1[data_2014]': [u'92620'], u'1[data_2015]': [u'30000'], u'3[data_2013]': [u'29201124'], u'3[data_2014]': [u'29470635'],...}>

print dict(request.POST)

{u'1[data_2014]': [u'92620'], u'1[data_2015]': [u'30000'], u'3[data_2013]': [u'29201124'], u'3[data_2014]': [u'29470635'],...}

Why don't I receive a dict of dict like I've send ?

What does Ajax do to the data before "sending" them ?

Thank You

JS dictionnary

console.log(JSON.stringify(values));
   {"1":{"data_2013":"49105","data_2014":"92620","data_2015":"30000","data_2016":"1945000"},"2":{"data_2013":"2885906","data_2014":"2876120","data_2015":"2882653","data_2016":"2787520"},"3":{"data_2013":"29201124","data_2014":"29470635","data_2015":"29383195","data_2016":"30154361"}}

Answer 1

jquery will breaks your js dict(it's called object in js) into multiple variables before sending via ajax so there is no dict on the python side , basically you can't pass a dictionary from js to python via ajax ... however they both understand json .

so you need to json encode your dict before sending them

   $.ajax({
            url : "holt/",
            type : "POST",
            data : { 'values' : JSON.stringify(values) } ,
            success : function (json) {
               console.log(json)
            },
            error : function () {
                alert("Error Ajax");
            }
        })

and decode them in the python view

dict_ = json.loads(request.POST.get('values'))

btw , i highly recommend using firebug if you are using ajax so can see whtas going on