Django 应用程序的 JsonResponse 未显示在 html 表或 console.log 中

Question

我有一个 Django 应用程序，可以解析 csv 并将数据存储在 SQLite 中，效果很好，我可以在管理面板中看到数据。现在，我无法在前端将数据显示为表格或在显示字典的控制台中显示数据。

JavaScript 在 html 表中显示

def airpollution_table_data(request):
    table_data = {}
    pollutant_list = [pollutant for pollutant in Pollutant.objects.all()]
    country_list = [country for country in Country.objects.all()]
    for pollutant in pollutant_list:
        table_data[pollutant.name] = {}

        for i, country in enumerate(country_list):
            total = PollutantEntry.objects \
                .aggregate(total=Sum('pollution_level', filter=Q(pollutant=pollutant,
                                                                 country=country)))['total']

            minimum = PollutantEntry.objects \
                .aggregate(min=Min('pollution_level', filter=Q(pollutant=pollutant,
                                                               country=country)))['min']
            maximum = PollutantEntry.objects \
                .aggregate(max=Max('pollution_level', filter=Q(pollutant=pollutant,
                                                               country=country)))['max']
            count = PollutantEntry.objects.filter(pollutant=pollutant, country=country).count()
            units = PollutantEntry.objects.filter(pollutant=pollutant, country=country).first()
            units = units.units if units else ''
            if total is not None and count:
                table_data[pollutant.name][country.iso_code] = {'avg': total / count, 'min': minimum,
                                                                'max': maximum,
                                                                'limit': pollutant.limit_value, 'units': units}
    return JsonResponse(table_data)

数据，但这

from django.urls import path
from . import views

app_name = 'supplychain'

urlpatterns = [
    path('', views.airpollution, name='airpollution'),
    path('airpollution_table_data', views.airpollution_table_data, name='airpollution_table_data'),
    path('temp_country_creator', views.temp_country_creator, name='temp_country_creator')
]

最初，我试图使用

{% extends 'base.html' %} 
{% load static%} 

   
   {% comment %} <script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
   <script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script> {% endcomment %}
   
  
   {% comment %} <script src="http://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css></script>
   <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script> {% endcomment %}


{% block content %}
<!-- Upload File Section-->

<!-- Page level plugins -->
<script src="http://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js></script>
<script src="http://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js></script>


<section class="page-section mt-5" id="import-form">
  <div class="container">
    <!-- Upload Section Heading-->
    <h2
      class="page-section-heading text-center text-uppercase text-secondary mb-0"
    >
      Upload Data
    </h2>
    <!-- Icon Divider-->
    <div class="divider-custom">
      <div class="divider-custom-line"></div>
      <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
      <div class="divider-custom-line"></div>
    </div>
    <!-- Upload Data Section Form-->
    <div class="row justify-content-center">
      <div class="col-lg-8 col-xl-7">
        <form id="upload-file" name="upload-file",
              enctype="multipart/form-data" method="POST" action="{% url 'supplychain:airpollution' %}">
          {% csrf_token %}
          <!-- Year input-->
          <div class="form-floating mb-3">
            <input
              class="form-control"
              id="year"
              name="year"
              type="number"
              placeholder="year"
              data-sb-validations="required"
            />
            <label>Year</label>
            <div class="invalid-feedback" data-sb-feedback="name:required">
              A name is required.
            </div>
          </div>
          <!-- Data input-->
          <div class="form-floating mb-3">
            <input
              class="form-control"
              id="file"
              name="file"
              type="file"
              data-sb-validations="required"
            />
            <label>File</label>
            <div class="invalid-feedback" data-sb-feedback="email:required">
              An email is required.
            </div>
            <div class="invalid-feedback" data-sb-feedback="email:email">
              Email is not valid.
            </div>
          </div>
          <!-- Submit success message-->

            <div id="success">{{ message_success }}</div>
                        <div class="form-group">
                            <button class="btn btn-primary btn-xl" id="upload" type="submit">Upload</button>
                        </div>

        </form>
      </div>
    </div>
  </div>
</section>

 <!-- Table Section-->
 <section class="page-section mt-5" id="data-table">
  <div class="container">
      <!-- Heading-->
      <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Data Table</h2>
      <!-- Icon Divider-->
      <div class="divider-custom">
          <div class="divider-custom-line"></div>
          <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
          <div class="divider-custom-line"></div>
      </div>
      <!-- Table-->
      <div class="row">
          <div class="col-lg-8 mx-auto">

              <table id="our-table" class="table">
                  <thead>
                  <tr>
                      <th scope="col">Pollutant</th>
                      <th scope="col">Country</th>
                      <th scope="col">Avg</th>
                      <th scope="col">Min</th>
                      <th scope="col">Max</th>
                      <th scope="col">Limit</th>
                      <th scope="col">Units</th>
                  </tr>
                  </thead>
                  <tbody id="table-body">

                  </tbody>
              </table>

          </div>
      </div>
  </div>
</section>


{% endblock %} 

{% block js %}
 

    <script>
        $(document).ready(function () {

            $.get("airpollution_table_data", function (data) {
              console.log(data)
            });
        })
    </script>

{% endblock%}

不起作用，所以我尝试执行 console.log，但仍然看不到任何内容Google Chrome 中的网络控制台。

可能出了什么问题？