javascript - Django(REST 框架)到 JSON。如何在 JavaScript 中通过我的 API 获取数据？

Question

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

我的目标是将我的模型数据可视化为图表或图形。对于可视化部分，我想选择 Charts.js。到目前为止，我能够在我的模板中使用给定的默认数据显示图表。现在我想将我的模型数据发送到我的模板并将其集成到 chart.js 中。据我了解，Chart.js 需要一种 JSON 格式。因此，我使用 Django REST Framework 设置了一个 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

../cars/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 代码放在我的 static/js 文件夹中的外部文件中。这至少适用于 Chart.js 和默认值。但现在我还在我的模板中提供了 js 代码，因为当 js 在我的静态文件夹中时，可能会引用我的 api 时出现一些问题。

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

../cars/templates/cars/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 %}