2

I am using AngularJS along with Python & Django and Django REST API. There is a JSON file created by the REST API and I need to post data into it using Angular $http.post().

I need to know if it is possible or not.

Im majorly getting 403(Forbidden) and 400(BAD REQUEST) errors on post..

$http({
       method: 'POST',
       url: '<JSON FILE URL>',
       data: $scope.tmpDataSet,
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}

 }});

This is my .post() method. where im fetching the data from a form made in angular and storing it in 'tmpDataSet'. Its being created properly and im able to store into the array. Im just not able to write it into the JSON file.

The structure of my JSON file is

{
    "count": 6,
    "next": null,
    "previous": null,
    "results": [
        {
            "name": "fff",
            "mobile_no": "fff",
            "email": "n@gmail.com",
            "message": "dfdf",
            "id": 1
        },
        {
            "name": "asd",
            "mobile_no": "0987654321",
            "email": "asd@gmail.com",
            "message": "no",
            "id": 2
        }
]

If any more code detail is needed please comment.

Akshay Saxena
  • 33
  • 11

3 Answers3

1

This issue can be solved by adding CSRF tokens to the angular app and using the regular $http.post() function with all the parameters.

app.config(function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});

and,

$http.post('<URL>', item).error(function(data,status,headers,config){
            console.log('COULDNT POST!');
        }).success(function(data, status, headers, config){
            console.log('POSTED!');
        });
Nikhil Sikka
  • 108
  • 8
0

There is something weird about this statement:

There is a JSON file created by the REST API and I need to post data into it using Angular $http.post().

If you are posting data to Django, you need to have a view and URL routing defined for that view. Something like:

def page(request):
    if request.POST:
          .... do stuff with POST data

Note, that you have to POST data to a view, if there is a simple JSON file on your filesystem, you can't add data by POSTING json to it.

nick_v1
  • 1,654
  • 1
  • 18
  • 29
  • I have used Django REST framework to create API which provides functions like GET, POST. It serializes data into JSON format. MY ANgular Consumes that API, Now i'm using POST function in Angular, do i still need to create a function to accept data in django view ? – Akshay Saxena Jul 19 '15 at 19:47
  • Is your POST request supposed to modify data on the server or are you just using it like GET? If it modifies anything, then you need to write server side code. – nick_v1 Jul 19 '15 at 22:10
  • it is supposed to add data to database. – Akshay Saxena Jul 20 '15 at 02:49
  • Thanks for your help, though i solved it through Angular only :) – Akshay Saxena Jul 22 '15 at 19:16
0

How does the $scope.tmpDataSet look like? Since you have specified a Content-Type for url-encoded

   headers: {'Content-Type': 'application/x-www-form-urlencoded'}

This indicates that the data that is received in your backend is not correct since you probably are passing a js object/array as the body of the request. This would explain the 400 Bad Request that you are getting.

Url Encoded data should be in the form of

Key=Value+One&Key2=Value+Two

Where the + represents whitespace.

If you are using jQuery you can try to use $.param() to convert Java objects to url-encoded strings

Ex

$http({
   method: 'POST',
   url: '<JSON FILE URL>',
   data: $.param($scope.tmpDataSet),
   headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 }});

Otherwise try this answer

https://stackoverflow.com/a/24964658/3371851

Community
  • 1
  • 1
soaP
  • 101
  • 5