Джанго Javascript Объяснение

Question

У меня есть этот код, и я пытаюсь понять его - я не совсем уверен, как он работает-

{% if book %}

    <script type='text/javascript'>

        $(document).ready(function() {

            $.get('/ajax/book/{{ book.id }}/timetable/', {}, function(data) {

                data = JSON.parse(data);
                var events = new Array();
                for (var i in data) {
                    events.push({
                        id: data[i].id,
                        title: '{{ request.user.name }}',
                        start: Date.parse(data[i].startTime, "yyyy-MM-dd HH:mm:ss"),
                        end: Date.parse(data[i].endTime, "yyyy-MM-dd HH:mm:ss"),
                        allDay: false
                    });
                }

                var calendar = $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'agendaDay,agendaWeek'
                    },
                    theme: true,
                    contentHeight: 400,
                    defaultView: 'agendaWeek',
                    selectable: true,
                    selectHelper: true,
                    eventClick: function(calEvent, jsEvent, view) {
                    },
                    select: function(start, end, allDay) {
                        var title = '{{ request.user.name }}';
                        $.post('/ajax/book/{{ book.id }}/timetable/new/', {
                            csrfmiddlewaretoken: getCookie('csrftoken'),
                            startTime: start.format("yyyy-mm-dd HH:MM:ss"),
                            endTime: end.format("yyyy-mm-dd HH:MM:ss"),
                        }, function(data) {
                            calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    allDay: allDay
                                },
                                true // make the event "stick"
                            );
                        });
                        calendar.fullCalendar('unselect');
                    },
                    editable: true,
                    events: events,
                    eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
                        alert(
                            "The end date of " + event.title + " has been moved " +
                            dayDelta + " days and " +
                            minuteDelta + " minutes."
                        );

                        if (!confirm("Is this okay?")) {
                            revertFunc();
                        }

                    }
                });

            });

        });

    </script>

Из того, что я могу сказать, ajax / book /.../ расписание и ajax / book /.../ расписание / новый вызов book_timetable (request, id) и book_timetable_new (request, id) -

  url(r'^ajax/book/(?P<bookid>\d+)/timetable/$', twobooks.ajax.views.book_timetable),
    url(r'^ajax/book/(?P<bookid>\d+)/timetable/new/$', twobooks.ajax.views.book_timetable_new),

где функции -

def book_timetable(request, bookid):
    book = get_object_or_404(Book, id=bookid)
    rawslots = TimeSlot.objects.filter(user=request.user).filter(book=book)
    slots = []
    for rawslot in rawslots:
        slot = {
            'id':           rawslot.id,
            'startTime':    str(rawslot.startTime),
            'endTime':      str(rawslot.endTime),
        }
        slots.append(slot)
    return HttpResponse(simplejson.dumps(slots))

def book_timetable_new(request, bookid):
    book = get_object_or_404(Book, id=bookid)
    startTime = datetime.strptime(request.POST['startTime'], "%Y-%m-%d %H:%M:%S")
    endTime = datetime.strptime(request.POST['endTime'], "%Y-%m-%d %H:%M:%S")
    timeslot = TimeSlot(
        user = request.user,
        book = book,
        startTime = startTime,
        endTime = endTime,
    )
    timeslot.save()
    return JSONify("")

Я пытаюсь сделать что-то похожее на это, за исключением других данных, поэтому я пытаюсь понять, как это работает. Если бы кто-нибудь мог мне это объяснить, было бы здорово!

Answer 1

Это довольно стандартный шаблон AJAX. Шаблон отображается в исходном виде, как обычно. В процессе рендеринга некоторые элементы Javascript, помеченные как переменные шаблона Django, заполняются - например, {{ book.id }} и {{ request.user.name }} - так что к тому времени, когда они попадают в браузер, они неотличимы от остальных JS.

Теперь Javascript выполняет вызов на сервер, передавая эти элементы. Сервер отвечает данными JSON, которые анализируются функцией, которая является третьим параметром при вызове .get. Я не слишком подробно изучил эту функцию, но, похоже, он использует эти данные для создания экземпляра fullCalendar, который предположительно является отдельным скриптом jQuery.

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