CODEWITHSUNDEEP
pythonajaxdjangoangularjs
rafaelcb21
rafaelcb21

Reputation: 13304

Ajax request with AngularJs and Django

I'm trying to make an Ajax request, however, I am not getting send the information until escalando() function located in views.py file The error appears

POST http://localhost:8000/escalar 403 (FORBIDDEN)

I do not know what I'm doing wrong

The directories are organized as follows:

+bvm
-manage.py
  +bvmf
    -__init__.py
    -settings.py
    -url.py
    -wsgi.py
    +bvmfconsulta
       -__init__.py
       -views.py
       +templates
          -postt.html

File postt.html

<!DOCTYPE html>
<html ng-app>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
    <script>
        function ListDropdown($scope, $http){
            $scope.ccvms={lista01:['1','3','5','7','9'],lista02:['2','4','6','8','10']}
            $scope.send=function(x,y){
                $http.post("/escalar",x+y)
            }
        } 
    </script>
</head>

<body>
    <div ng-controller="ListDropdown">
        <select ng-model="ccvm" ng-options="ccvm as ccvm for (ccvm, nums) in ccvms"></select>
        <select ng-model="num" ng-disabled="!ccvm" ng-options="num for num in ccvms[ccvm]" ng-change="send(num, ccvm)"></select>
    </div>
</body>
</html>

File url.py

from django.conf.urls import patterns, include, url
urlpatterns = patterns('',
url(r'^post2/','bvmfconsulta.views.post3'),
url(r'^escalar','bvmfconsulta.views.escalando')
)

File views.py

from django.shortcuts import render_to_response
from bvmfconsulta.escala import demonstrativos

def post3(request):
   return render_to_response("postt.html")

def escalando(self,args):
   print args

Upvotes: 0

Views: 1406

Answers (1)

biobirdman
biobirdman

Reputation: 4120

Theres a few changes that you have to make.

  1. make sure that your post request has the correct headers.
  2. change your post command in angulars to have data in the post object change
  3. your django view to expect a post request and access the post data.

Configure your angular POST to have the correct header

In your javascript section : 

var ListDropdown = angular.module('ListDropdown', ['ngResource']);
ListDropdown.config(function($httpProvider , $interpolateProvider, $resourceProvider){
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    //** django urls loves trailling slashes which angularjs removes by default.
    $resourceProvider.defaults.stripTrailingSlashes = false;

    //** you can skip these if you want
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
    **//
  });

Change your post command in angulars to have data in the post object

change

When posting, it will be best if you store your args as data. so your post statement will look lik e

$http.post(url, data: {test: 'data'})

django view to expect a post request and access the post data.

In your views.py :

you should consider making sure that the request is a post request, naming your first argument as request ( for clarity ) and then you can access the data that you are sending via the POST Dictionary 

def escalando(request,args):
   if request.method == 'POST':
       request.POST.get('test') ## show return data.

For more documentation :

Upvotes: 2

Related Questions