Skip to content

Instantly share code, notes, and snippets.

@bgloh
Created January 11, 2019 03:32
Show Gist options
  • Save bgloh/6cee54f7200d558f3fb7e401cb4513ba to your computer and use it in GitHub Desktop.
Save bgloh/6cee54f7200d558f3fb7e401cb4513ba to your computer and use it in GitHub Desktop.
Django-AngularJS : csrf token, http Content-Type, $.params
<html ng-app='myApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js">
</script>
<script
src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
</head>
<div ng-controller="myController1">
<p>This is index.html</p> <br>
<p>value1 : [{ var1 }] </p>
</div>
</html>
<script>
var app = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[{');
$interpolateProvider.endSymbol('}]');
})
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
}]);
app.controller('myController1', function($scope,$http){
$scope.var1 = 1999.2345;
// http POST
$http({
method: 'POST',
url: 'getResponse',
data: $.param({'info' : $scope.var1, 'd': 123.456 })
}).then(function(response) {
console.log(response);
}, function(error) {
console.log(error);
});
});
</script>
@bgloh
Copy link
Author

bgloh commented Jan 11, 2019

To get Django to work seamlessly with AngularJS, Do

  • Declare csrf-token in .config in AngularJS
  • Set Content-Type to application/x-www-form-urlencoded
app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
}]);
  • Preprocess data using $.param of JQuery
$http({
                   method: 'POST',
                   url: 'getResponse',
                   data: $.param({'info' : $scope.var1, 'd': 123.456 })
            }).then(function(response) {
            	console.log(response);
            }, function(error) {
                console.log(error);
            });

@bgloh
Copy link
Author

bgloh commented Jan 11, 2019

To view http post request message, request.POST
To serialize javascript object, use json.dumps method

def index2(request):
	print('http request : {0}'.format(request.POST))
	return HttpResponse(json.dumps({ 'a' : 100, 'b' : 200}))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment