使用 JSON 将数据从 Angular.js 发布到 Django REST API

Question

我将 AngularJS 与 Python & Django 和 Django REST API 一起使用。 REST API 创建了一个 JSON 文件，我需要使用 Angular $http.post() 将数据发布到其中。

我需要知道这是否可能。

我在发布时主要收到 403（禁止）和 400（错误请求）错误..

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

 }});

这是我的 .post() 方法。我从角度制作的表单中获取数据并将其存储在“tmpDataSet”中。它被正确创建并且我能够存储到数组中。我只是无法将其写入 JSON 文件。

我的 JSON 文件的结构是

{
    "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
        }
]

如果需要更多代码细节，请评论。

Answer 1

可以通过将 CSRF 令牌添加到 Angular 应用程序并使用带有所有参数的常规 $http.post() 函数来解决此问题。

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

和，

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

Answer 2

这句话有点奇怪：

REST API 创建了一个 JSON 文件，我需要使用 Angular $http.post() 将数据发布到其中。

如果您将数据发布到 Django，您需要为该视图定义一个视图和 URL 路由。比如：

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

请注意，您必须将数据发布到视图，如果您的文件系统上有一个简单的 JSON 文件，则不能通过 POSTING json 向其中添加数据。

Answer 3

$scope.tmpDataSet 是什么样子的？由于您已经为 url-encoded 指定了 Content-Type

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

这表明在您的后端接收到的数据不正确，因为您可能正在传递一个 js 对象/数组作为请求的主体。这将解释您收到的 400 Bad Request。

Url 编码数据格式应为

Key=Value+One&Key2=Value+Two

其中 + 表示空格。

如果您使用的是 jQuery，您可以尝试使用 $.param() 将 Java 对象转换为 url 编码的字符串

前

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

否则试试这个答案

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