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 /書/ .. ./timetable和Ajax /書/.../時間表/新呼叫book_timetable（請求ID）和book_timetable_new（請求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模式。正常情況下，模板由原始視圖呈現。在渲染過程中，標記爲Django模板變量的Javascript的某些元素被填充 - 例如{{ book.id }}和{{ request.user.name }} - 因此，當它到達瀏覽器時，這些元素與JS的其餘部分無法區分。

現在，Javascript調用服務器，傳遞這些元素。服務器用JSON數據進行響應，JSON數據由作爲調用.get的第三個參數的函數進行分析。我沒有深入研究這個函數，但似乎是使用這些數據來實例化一個fullCalendar，這大概是一個單獨的jQuery腳本。

一個有點奇怪的事情是，一旦瀏覽器加載了頁面，AJAX調用就會設置爲運行 - 通常這樣做沒有意義，因爲您可以簡單地將數據包含在原始模板中。通常AJAX被設置爲響應瀏覽器中的某些事件而執行，例如按鈕點擊。