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

../汽車/ 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>

我建議看看金賈。 它是一個中間件，旨在與 Django 后端一起工作，並讓您直接將這些數據與 html 一起使用來執行類似的操作

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