没有从 Django rest api 获取数据到 AngularJS答案

【问题标题】：Not getting data from Django rest api to AngularJS没有从 Django rest api 获取数据到 AngularJS
【发布时间】：2017-10-30 19:40:53
【问题描述】：

我是 AngularJS 和 Djnago Rest Framework 的新手。我创建了一个 web api，它以 JSON 格式返回客户列表。我在 mozilla firefox 的 RESTClient 附加组件中获得了正确的数据。但我无法在AngularJS 脚本中获取数据。

这里我附上了所有的代码和错误图片如下：

views.py（API 代码）

class CustomerListView(APIView):
    renderer_classes = (JSONRenderer, )

    def post(self, request, format=None):
        content = []
        customer_list = Customer_tbl.objects.all()
        if customer_list:
            for customer in customer_list:
                content.append({ 
                    'first_name': customer.cus_first_name,
                    'last_name': customer.cus_last_name,
                    'email': customer.cus_email,
                    'contact': customer.cus_contact
                    })
        return Response(content)

test.html

<!DOCTYPE html>
<html ng-app="myTestModule">
<head>
    <script src="../scripts/angular.js"></script>
    <script src="../scripts/sample_page_test.js"></script>
    <link href="../css/style_new.css" rel="stylesheet" />-->
</head>
<body> 
    <div ng-controller="customerController">
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Contact</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="customer in customers">
                    <td>{{ customer.first_name }}</td>
                    <td>{{ customer.last_name }}</td>
                    <td>{{ customer.email }}</td>
                    <td>{{ customer.contact }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    ...
    ...
    ...
</body>
</html>

sample_page_test.js

var myTestApp = angular.module("myTestModule", [])
myTestApp.controller("customerController", function ($scope, $http) {
        var url = "http://192.168.1.102:8000/stl_web_app/api/customer_list/";

        $http.post(url).then( function(response) {
           $scope.customers = response.data;
        });
});

错误图片

在 Firebug 控制台中出现以下错误

error.png

我需要在 django 应用程序的settings.py 中进行任何更改吗？

那么，谁能帮我解决这个问题？

任何帮助将不胜感激。

谢谢。

【问题讨论】：

实现这个github.com/ottoyiu/django-cors-headers
@itzMEonTV 非常感谢......它就像魅力一样...... !!!!

标签： python angularjs django django-rest-framework

【解决方案1】：

首先，您实际上是在尝试执行 POST 请求吗？因为从外观上看，您似乎正在尝试返回客户列表。请使用 GET 请求而不是 POST 来获取数据。

其次，如果您遇到跨域资源共享问题，请检查您是否正确传递了 CSRF-TOKEN 以及 POST 请求。

views.py

class CustomerListView(APIView):
    renderer_classes = (JSONRenderer, )

    def get(self, request, format=None):
        content = []
        customer_list = Customer_tbl.objects.all()
        if customer_list:
            for customer in customer_list:
                content.append({ 
                    'first_name': customer.cus_first_name,
                    'last_name': customer.cus_last_name,
                    'email': customer.cus_email,
                    'contact': customer.cus_contact
                    })
        return Response(content)

sample_page_test.js

var myTestApp = angular.module("myTestModule", [])
myTestApp.controller("customerController", function ($scope, $http) {
var url = "http://192.168.1.102:8000/stl_web_app/api/customer_list/";

        $http.get(url).then( function(response) {
           $scope.customers = response.data;
        });
});

希望这会对你有所帮助。

【讨论】：

@Nikunj 如果我的回复对您有帮助，您可以标记为答案。