使用Ajax如何在完整日历中填充事件数据？

Question

我正在Django项目中使用FullCalender。  使用for循环，当脚本在同一HTML页面中时，我可以填充数据，但是现在我想分离js文件。 urls.py

  url(r'deal/$', views.deal,name="deal")

Views.py

def deal(request):
    if request.method == 'POST':
        form = Deals_Form(request.POST, request.FILES)
        if form.is_valid():
            print(form)
            form.save()
            messages.success(request, "Insertion Success!")
            return redirect('/deal')
        else:
            messages.success(request,"You missed to fill some fields!")
            return redirect('/')

    else:
        all_events = DealsCalendar.objects.all()
        get_event_types = DealsCalendar.objects.only('event_type')
        form = Deals_Form()
        product_data = Product.objects.all()
        pro_name = []
        for i in product_data:
            pro_name.append(i.name)

        # if filters applied then get parameter and filter based on condition else return object
        if request.GET:  
            event_arr = []
            if request.GET.get('event_type') == "all":
                all_events = DealsCalendar.objects.all()
            for i in all_events:
                event_sub_arr = {}
                event_sub_arr['title'] = i.event_name
                start_date = datetime.datetime.strptime(str(i.start_date.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
                end_date = datetime.datetime.strptime(str(i.end_date.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
                event_sub_arr['start'] = start_date
                event_sub_arr['end'] = end_date
                event_arr.append(event_sub_arr)
            return HttpResponse(json.dumps(event_arr))
        context = {
                "events":all_events,
                "form":form,
                "data":pro_name, "product_data":product_data
                    }
    return render(request,'dashboard/dealscalender/deals_calender.html',context)

脚本

$(function () {
  // #1. CALENDAR INIT

  if ($("#fullCalendar").length) {
    var calendar, d, date, m, y;

    date = new Date();

    d = date.getDate();

    m = date.getMonth();

    y = date.getFullYear();

    calendar = $("#fullCalendar").fullCalendar({
      header: {
        left: "prev,next today",
        center: "title",
        right: "month,agendaWeek,agendaDay"
      },
      selectable: true,
      selectHelper: true,
      select: function select(start, end, allDay) {
        $("#exampleModal").modal('show');
      },
      editable: true,
      events: [
            {% for i in events %}
            { 
                id:"{{i.deal_id}}",
                title: "{{ i.product_name}}",
                start: '{{ i.start_date|date:"Y-m-d" }}',
                end: '{{ i.end_date|date:"Y-m-d" }}'+"T23:59:00",
                type:'{{i.event_type}}',
                dealdiscount :'{{i.deal_discount  }}',
                dealdescription :'{{i.deal_description }}',
                allDay: false


            },
            {% endfor %}

        ]

    });
  }
});

HTML

<div id="fullCalendar">
    <!-- Upadate form -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="/deal/" method="POST" enctype="multipart/form-data">
                    {% csrf_token %}

                    <div class="modal-body">
                        <div class="form-group">
                            <label for="email">Product name</label>
                            <input type="text" name="product_name" placeholder="Product name"
                                class="form-control " id="tag">
                        </div>
                        <label>Start Date</label>
                        <div class="input-group date-time">
                            <input class="single-daterange form-control" placeholder="Start Date"
                                name="start_date" id="start_date" type="text">
                            <br>

                        </div>
                        <br>
                        <label>End Date</label>
                        <div class="input-group date-time">
                            <input class="single-daterange form-control" placeholder="Start Date"
                                name="end_date" id="party" type="text">
                            <br>

                        </div>
                        <br>
                        <div class="form-group">
                            <label for="type">Deal Type</label>
                            <input type="text" name="deal_type" placeholder="Type" class="form-control"
                                id="type">
                        </div>
                        <br>
                        <div class="form-group">
                            <label for="discount">Deal Discount (%)</label>
                            <input type="number" maxlength="2" placeholder="Discount" name="deal_discount  "
                                class="form-control" id="discount">
                        </div>
                        <br>
                        <div class="form-group">
                            <label for="description">Deal Description</label>
                            <textarea type="text" name="deal_description" placeholder="Description"
                                cols="30" rows="5" style="resize: none;" class="form-control"
                                id="description"></textarea>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- End form -->

</div>

使用上面的代码，我可以获取记录并填充到完整的日历中，但是现在我需要分离js文件，但是我不知道如何进行ajax调用来获取要填充到完整日历中的详细信息。我该怎么办？

如果我含糊不清，我先表示歉意，但我随时准备根据问题作进一步解释。

谢谢