Django（REST 框架）到 JSON。如何在 JavaScript 中通过我的 API 获取数据？

Question

如何使用 JavaScript 从我的 API 中获取数据？

我的目标是将我的模型数据可视化为图表或图形。对于可视化部分，我想选择 Charts.js。到目前为止，我能够在我的模板中显示一个带有给定默认数据的图表。现在我想将我的模型数据发送到我的模板并将其集成到 chart.js 中。据我了解，Chart.js 需要 JSON 格式。所以我用 Django REST 框架设置了一个 API，我得到了一个输出。

文件夹结构

  visual # -- my project
    ├── cars # -- API
    │   ├── templates
    │   │   └── cars   
    │   │       └── cars_home.html
    │   ├── <...>
    │   ├── urls.py
    │   ├── serializers.py
    │   └── views.py
    ├── charts
    ├── static
    │   ├── css
    │   ├── img
    │   └── js
    │       ├── chart_2.js
    │       └── <...>
    ├── templates
    │   ├── base
    │   │   └── base.html
    │   └── includes
    ├── visual
    │   ├── settings.py
    │   ├── urls.py
    │   └── views.py   *db.sqlite3
    └── manage.py

../汽车/urls.py

from django.urls import path
from rest_framework.urlpatterns import format_suffix_patterns
from cars import views
from cars.views import CarsHomeView

app_name = 'cars' 

urlpatterns = [
    path('carshome/', CarsHomeView.as_view(), name='cars_home'),
    path('cars/', views.SnippetList.as_view()),
    path('cars/<int:pk>/', views.SnippetDetail.as_view()),
]

urlpatterns = format_suffix_patterns(urlpatterns)

这是我的 API 的输出：

http://127.0.0.1:8000/cars/

HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 4,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 3,
            "name": "Audi",
            "price": 11
        },
        {
            "id": 4,
            "name": "Audi",
            "price": 11
        },
        {
            "id": 2,
            "name": "Mercedes",
            "price": 22
        },
        {
            "id": 1,
            "name": "BMW",
            "price": 99
        }
    ]
}

这是原始输出

http://127.0.0.1:8000/cars/?format=json

{"count":4,"next":null,"previous":null,"results":[{"id":3,"name":"Audi","price":11},{"id":4,"name":"Audi","price":11},{"id":2,"name":"Mercedes","price":22},{"id":1,"name":"BMW","price":99}]}

问题是如何使用 JavaScript 从我的 API 中获取数据？

我的方法是，首先简单地在我的模板中打印数据 - 检查它是否有效。另一件事是尝试两种不同的东西。一种是将 JavaScript 代码放在我的静态 /js 文件夹中的 extern 文件中。这至少适用于 Chart.js 和默认值。但是现在我还在我的模板中提供了 js 代码，因为当它在我的静态文件夹中时，js 可能有一些问题来引用我的 api。

所以这里是 template.html。我有来自教程站点的 JS 获取代码，不幸的是我找不到 django - js 示例。

../汽车/模板/汽车/cars_home.py

{% extends 'base.html' %}

{% load static %}

{% block content %}

<div class="container-fluid">
    <div class="row">
        <h1>Wellcome to Cars Home</h1>
    </div>

    <div class="row">


        <!--via external js-->
        <script src="{% static 'js/chart_2.js' %}"></script>


        <!--via internal js-->
        <script>
            fetch('http://127.0.0.1:8000/cars/?format=json')
                .then(response => {
                    return response.json()
                })
                .then(data => {
                    // Work with JSON data here
                    console.log(data)
                })
                .catch(err => {
                    // Do something for an error here
                })

        </script>

    </div>
</div>

{% endblock content %}

另一个问题是，我的 API 输出中是否需要所有这些东西？

{"count":4,"next":null,"previous":null,"

我想如果它看起来像这样会更好吗？

"results":[{"id":3,"name":"Audi","price":11},{"id":4,"name":"Audi","price":11},{"id":2,"name":"Mercedes","price":22},{"id":1,"name":"BMW","price":99}]}

更新： 看来我在 Firefox 中的控制台出现了一些问题，并且没有显示数组和对象。我改用 Chrome 控制台，它向我展示了一切。

Answer 1

一些事情

"count":4,"next":null,"previous":null," 是您稍后想要对 API 资源进行分页的内容。如果您想一次将呼叫限制为 10 个并在您的网站上显示潜在的下一页。如果您每页显示 10 个并且计数为 25，则您将显示 3 个潜在页面，例如在线商店。你以后可能会需要它。

你的脚本没有做任何事情吗？您没有在控制台中获得任何数据吗？我会确保您可以在浏览器中访问该实际网站并查看某些内容。我无法访问您本地计算机上的内容。

<script>
            fetch('http://127.0.0.1:8000/cars/?format=json')
                .then(response => {
                    return response.json()
                })
                .then(data => {
                    // Work with JSON data here
                    console.log(data)
                })
                .catch(err => {
                    // Do something for an error here
                })

        </script>

我建议调查 Jinja。它是一个中间件，旨在与 Django 后端一起使用，让您可以直接将这些数据与 html 一起使用来执行类似的操作

{% for car in cars %}
  <li> <strong>{{car.name}}:</strong> {{car.price}} </li>
{% endfor %}