Django 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 /.../ timetable和ajax / book /.../ timetable / new call book_timetable（request，id）and 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设置为响应浏览器中的某些事件而执行，例如单击按钮。