$(document).ready(function () $ is not defined when sending jsonresponse from django app

Question

I'm having this issue when sending a json response from my django app to a table using javascript/jquery.

I've seen other threads that say this is error is due to jquery not being used, and that we should add the link to jquery such as the following within the tags but i don't have head tags.

Query link:

<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>

my welcome.html file with javascript and table html at the end:

{% 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-->


<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 %}
<!-- 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>
 

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

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

{% endblock %}

edit Solution

I added jquery before using datatables and error has gone!:

<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
 

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

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