Sending post data from angularjs to django as JSON and not as raw content

Question

I have a request like this:

$http({ 
    method: 'POST', 
    url: '/url/', 
    data: 'test=data'
})

In my django views:

class SomeClass(View):
    def get(self, request):
        return HttpResponse("Hello")
    def post(self, request):
        print request.post
        print request.body
        return HttpResponse("Done")

So when I do request.POST I get an empty query dict :<QueryDict: {}>

But my request.body has: test=data

So I believe django receives the data as url-encoded parameters and not as a dictionary.

How do I send or receive this data as JSON/Dict ?

Is the code correct? I think you should use request.POST instead of request.post. — esauro
– esauro, Commented Sep 24, 2013 at 10:32
Instead of data, try params and give an object instead of string. Ref: docs.angularjs.org/api/ng.$http#parameters — Bibhas Debnath
– Bibhas Debnath, Commented Sep 24, 2013 at 11:09

mariodev · Accepted Answer · 2013-09-24 12:43:39Z

44

When calling ajax, you recieve encoded json string in request body, so you need to decode it using python's json module to get python dict:

json.loads(request.body)

answered Sep 24, 2013 at 12:43

mariodev

15.7k4 gold badges56 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dustin Over a year ago

I like this solution because I can use AngularJS as it was designed instead of hacking it to work as I'm used to working with jQuery.

David Betz Over a year ago

Beautiful idiomatic method.

Rishabh Agrahari Over a year ago

If you are using angular 4 and DRF use request.data.

Sergey Telminov · Accepted Answer · 2014-01-17 13:41:45Z

14

In my case works something like

$http({
    url: '/url/',
    method: "POST",
    data: $.param(params),
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
})

Or more nice variant:

app.config ($httpProvider) ->
    ...
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

and then

$scope.save_result = $http.post('/url/', $.param(params))

http://www.daveoncode.com/2013/10/17/how-to-make-angularjs-and-django-play-nice-together/

edited Jan 17, 2014 at 13:41

answered Oct 31, 2013 at 15:35

Sergey Telminov

8198 silver badges10 bronze badges

Comments

khichar.anil · Accepted Answer · 2014-07-21 00:55:40Z

2

I am using zope2 where I used simplejson to decode the request json into python dictionary as:

request_dict = simplejson.loads(request.get('BODY','')

It's working correctly for me. In this way I am able to use angularjs default json request rather than converting it into form post.

answered Jul 21, 2014 at 0:55

khichar.anil

5,1141 gold badge27 silver badges21 bronze badges

1 Comment

Ravi Over a year ago

saved the day for me

Olivier · Accepted Answer · 2016-06-26 01:20:40Z

2

I improved mariodev's solution a bit by creating a decorator:

# Must decode body of angular's JSON post requests
def json_body_decoder(my_func):
    def inner_func(request, *args, **kwargs):
        body = request.body.decode("utf-8")
        request.POST = json.loads(body)
        return my_func(request, *args, **kwargs)
    return inner_func

 @json_body_decoder
 def request_handler(request):
     # request.POST is a dictionary containing the decoded body of the request

Now I just add the @json_body_decoder decorator whenever I create a request handler that deals with post data in application/json.

answered Jun 26, 2016 at 1:20

Olivier

8931 gold badge11 silver badges14 bronze badges

Comments

Rishabh Agrahari · Accepted Answer · 2017-09-26 09:36:21Z

1

For angular 4 and Django Rest Framework use request.data to get json object.

like:

posted_data = request.data

answered Sep 26, 2017 at 9:36

Rishabh Agrahari

3,7672 gold badges25 silver badges24 bronze badges

Comments

Daniel Roseman · Accepted Answer · 2013-09-24 10:36:14Z

0

The $http service expects a JS object, not a string. Try this:

$http({ 
    method: 'POST', 
    url: '/url/', 
    data: {test: 'data'}
})

answered Sep 24, 2013 at 10:36

Daniel Roseman

602k68 gold badges910 silver badges923 bronze badges

Collectives™ on Stack Overflow

Sending post data from angularjs to django as JSON and not as raw content

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related