无法从Django Rest API到AngularJS获取数据

Question

I am new to AngularJS and Djnago Rest Framework . 我是AngularJS和Djnago Rest Framework 。 I have created one web api which return list of customers in JSON format. 我创建了一个Web API，以JSON格式返回客户列表。 I am getting proper data in RESTClient add-on of mozilla firefox. 我在mozilla firefox的RESTClient插件中获取了正确的数据。 But i am not able to get data in AngularJS script. 但是我无法在AngularJS脚本中获取数据。

Here i have attached all the codes and error image as below: 在这里，我附上了所有代码和错误图像，如下所示：

views.py (API code) 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 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 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;
        });
});

Error Image 错误图片

getting following error in Firebug console 在Firebug控制台中出现以下错误

error.png error.png

Do i need to make any changes in settings.py of django application? 我需要在Django应用程序的settings.py中进行任何更改吗？

So, Can anyone please help me to solve this issue? 所以，有人可以帮我解决这个问题吗？

Any help would be greatly appreciated. 任何帮助将不胜感激。

Thank you. 谢谢。

Answer 1

First of all, are you actually trying to do a POST request? 首先，您实际上是在尝试发出POST请求吗？ Because from the looks of it, seems that you are trying to return a list of customers. 因为从外观上看，您似乎正在尝试返回客户列表。 Please use GET request instead of POST to fetch data. 请使用GET请求而不是POST来获取数据。

Secondlly, If you are facing Cross-Origin Resource Sharing issue then check if you have passed correctly CSRF-TOKEN along with the POST request. 其次，如果您遇到跨域资源共享问题，请检查您是否正确传递了CSRF-TOKEN和POST请求。

views.py 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 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;
        });
});

Hope this will help you. 希望这会帮助你。

无法从Django Rest API到AngularJS获取数据

问题描述

1 个解决方案

解决方案1
0 2017-05-30 12:28:39

views.py views.py

sample_page_test.js sample_page_test.js

无法从Django Rest API到AngularJS获取数据

问题描述

1 个解决方案

解决方案1 0 2017-05-30 12:28:39

views.py views.py

sample_page_test.js sample_page_test.js

解决方案1
0 2017-05-30 12:28:39