Обновлять JavaScript без обновления страницы. Django framework

Я не знаю, как работает AJAX, поэтому обращаюсь за помощью к ребятам. Просто хочу обновить свой javascript файл без обновления главной страницы. Обычно при обновлении главной страницы обновляется django views.py и таким образом я получаю данные. Я уверен, что это возможно с помощью AJAX, как я где-то видел, но не уверен, как это работает.

Мой javascript:

<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
        <script type="text/javascript">
            /*extend leadlet - you should include the polli*/
  L.RotatedMarker = L.Marker.extend({
    options: {
    angle: 0
    },
    _setPos: function (pos) {
    L.Marker.prototype._setPos.call(this, pos);
    if (L.DomUtil.TRANSFORM) {
    // use the CSS transform rule if available
    console.log(this.options.angle);
    this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
    } else if(L.Browser.ie) {
    // fallback for IE6, IE7, IE8
    var rad = this.options.angle * (Math.PI / 180),
    costheta = Math.cos(rad),
    sintheta = Math.sin(rad);
    this._icon.style.filter += ' progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\', M11=' +
    costheta + ', M12=' + (-sintheta) + ', M21=' + sintheta + ', M22=' + costheta + ')';
    }
    }
    });
    L.rotatedMarker = function (pos, options) {
    return new L.RotatedMarker(pos, options);
  };
        var locations = {{ data|safe }};
        var PlaneIcon = L.Icon.extend({
            options: {
            iconUrl: '{% static "media/plane.png" %}',
            iconSize:     [25, 25], // size of the icon
            popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
        }
});



    var map = L.map('map',{
    keyboard: false,
    dragging: false,
    zoomControl: false,
    boxZoom: false,
    doubleClickZoom: false,
    scrollWheelZoom: false,
    tap: false,
    touchZoom: false,
    center: [66.008759, -0.666570],
    zoom: 8,
    minZoom: 8,
    maxZoom: 0
});
            var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);
            for (var i = 0; i < locations.length; i++) {
            marker = new L.rotatedMarker([locations[i][5], locations[i][6]],{icon: new PlaneIcon({iconUrl: '{% static "media/" %}'+locations[i][0]+".png"}), angle: (locations[i][4] - 45)})
            .bindPopup(locations[i][0]+" - Registration: "+locations[i][1]+ " - Distance: "+locations[i][9]+ " Heading: "+locations[i][4]+ " Speed: "+locations[i][3])
            .addTo(map);

}
            
            
        </script>

Мой views.py:

from rest_framework import viewsets
from django.views.generic import ListView
from .serializers import Flightserializer
from .models import Flights
from django.shortcuts import render



class FlightViewSet(viewsets.ModelViewSet):
    queryset = Flights.objects.all().order_by('aircraft')
    serializer_class = Flightserializer

class HomePageView(ListView):
    model = Flights
    template_name = 'home.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)

        context['data'] = [
            [
                obj.aircraft,
                obj.registration,
                obj.altitude,
                obj.ground_speed,
                obj.heading,
                obj.latitude,
                obj.longtitude,
                obj.flying_from,
                obj.flying_to,
                obj.distance
            ]
            for obj in Flights.objects.all()
        ]

        return context

Вернуться на верх