数据没有保存在数据库中，但主键是创建的Django Fullcalendar

Question

当前实际数据未保存在数据库中，但当我输入数据后单击"注册"按钮时，将保存一个空数据并创建主键。张贴在任何地方都没有错误，但保存了一个空数据。我使用Django框架作为后端，作为前端，我主要使用Javascript和HTML。对于数据库，我使用Sqlite。我认为数据传输中最重要的部分是Ajax部分，但由于我第一次使用Ajax和Javascript，我仍然不知道很多事情。请帮帮我。

script.js

function initializePage() {
$('#calendar').fullCalendar({
height: 550,
lang: "ja",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
navLinks: true,
timeFormat: 'HH:mm',
selectable: true,
selectHelper: true,
eventSources:[{
url: '/fullcalendar/calendar',
method: 'GET',
failure: function(){
alert("PROBLEM!!!");
},
}
],
select: function(start, end, resource) {
// 日付選択された際のイベント
// ダイアログタイトル設定
$("#dialogTitle").text("スケジュール登録");
// タイトル初期化
$("#inputTitle").val("");
// 備考初期化
$("#inputDescription").val("");
// ボタン制御
$("#registButton").show();
$("#updateButton").hide();
$("#deleteButton").hide();

// ダイアログ表示
$('#inputScheduleForm').on('show.bs.modal', function (event) {
setTimeout(function(){
$('#inputTitle').focus();
}, 500);
}).modal("show");

// 日付ピッカーの設定
$('#inputYmdFrom').datetimepicker({locale: 'ja', format : 'YYYY年MM月DD日', useCurrent: false });
$('#inputYmdTo').datetimepicker({locale: 'ja', format : 'YYYY年MM月DD日', useCurrent: false });
$('.ymdHm').datetimepicker({
locale: 'ja',
format : 'YYYY年MM月DD日 HH時mm分'
});

// 開始終了が逆転しないように制御
$("#inputYmdFrom").on("dp.change", function (e) {
$('#inputYmdTo').data("DateTimePicker").minDate(e.date);
});
$("#inputYmdTo").on("dp.change", function (e) {
$('#inputYmdFrom').data("DateTimePicker").maxDate(e.date);
});

if (this.name == "month") {
$('.ymdHm').hide()
$('.ymd').show()

// 終日チェックボックス
$('#allDayCheck').prop("checked", true);
// 選択された日付をフォームにセット
// FullCalendar の仕様で、終了が翌日の00:00になるため小細工
var startYmd = moment(start);
var endYmd = moment(end);
if (endYmd.diff(startYmd, 'days') > 1) {
endYmd = endYmd.add(-1, "days");
} else {
endYmd = startYmd;
}
$('#inputYmdFrom').val(startYmd.format("YYYY年MM月DD日"));
$('#inputYmdFrom').data("DateTimePicker").date(startYmd.format("YYYY年MM月DD日"));
$('#inputYmdTo').val(endYmd.format("YYYY年MM月DD日"));
$('#inputYmdTo').data("DateTimePicker").date(endYmd.format("YYYY年MM月DD日"));
} else {
$('.ymdHm').show();
$('.ymd').hide();

// 終日チェックボックス
$('#allDayCheck').prop("checked", false);
var startYmd = moment(start);
var endYmd = moment(end);
$('#inputYmdHmFrom').val(startYmd.format("YYYY年MM月DD日 HH時mm分"));
$('#inputYmdHmFrom').data("DateTimePicker").date(startYmd.format("YYYY年MM月DD日 HH時mm分"));
$('#inputYmdHmTo').val(endYmd.format("YYYY年MM月DD日 HH時mm分"));
$('#inputYmdHmTo').data("DateTimePicker").date(endYmd.format("YYYY年MM月DD日 HH時mm分"));
}

},
eventClick: function(event) {
// 予定クリック時のイベント
$("#dialogTitle").text("スケジュール詳細");
// スケジュールID設定
$("#scheduleId").val(event.id);
// タイトル設定
$("#inputTitle").val(event.title);
// ボタン制御
$("#registButton").hide();
$("#updateButton").show();
$("#deleteButton").show();
// ダイアログ表示
$('#inputScheduleForm').on('show.bs.modal', function (event) {
setTimeout(function(){
$('#inputTitle').focus();
}, 500);
}).modal("show");
// 日付ピッカーの設定
$('#inputYmdFrom').datetimepicker({locale: 'ja', format : 'YYYY年MM月DD日', useCurrent: false });
$('#inputYmdTo').datetimepicker({locale: 'ja', format : 'YYYY年MM月DD日', useCurrent: false });
$('.ymdHm').datetimepicker({
locale: 'ja',
format : 'YYYY年MM月DD日 HH時mm分'
});
// 開始終了が逆転しないように制御
$("#inputYmdFrom").on("dp.change", function (e) {
$('#inputYmdTo').data("DateTimePicker").minDate(e.date);
});
$("#inputYmdTo").on("dp.change", function (e) {
$('#inputYmdFrom').data("DateTimePicker").maxDate(e.date);
});
// 終日チェックボックス
$('#allDayCheck').prop("checked", true);
// 選択された日付をフォームにセット
if (this.name == "month") {
$('.ymdHm').hide()
$('.ymd').show()
// 終日チェックボックス
$('#allDayCheck').prop("checked", true);
// 選択された日付をフォームにセット
// FullCalendar の仕様で、終了が翌日の00:00になるため小細工
var startYmd = moment(start);
var endYmd = moment(end);
if (endYmd.diff(startYmd, 'days') > 1) {
endYmd = endYmd.add(-1, "days");
} else {
endYmd = startYmd;
}
$('#inputYmdFrom').val(startYmd.format("YYYY年MM月DD日"));
$('#inputYmdFrom').data("DateTimePicker").date(startYmd.format("YYYY年MM月DD日"));
$('#inputYmdTo').val(endYmd.format("YYYY年MM月DD日"));
$('#inputYmdTo').data("DateTimePicker").date(endYmd.format("YYYY年MM月DD日"));
} else {
$('.ymdHm').show();
$('.ymd').hide();
// 終日チェックボックス
$('#allDayCheck').prop("checked", false);
var startYmd = moment(event.start);
var endYmd = moment(event.end);
$('#inputYmdHmFrom').val(startYmd.format("YYYY年MM月DD日 HH時mm分"));
$('#inputYmdHmFrom').data("DateTimePicker").date(startYmd.format("YYYY年MM月DD日 HH時mm分"));
$('#inputYmdHmTo').val(endYmd.format("YYYY年MM月DD日 HH時mm分"));
$('#inputYmdHmTo').data("DateTimePicker").date(endYmd.format("YYYY年MM月DD日 HH時mm分"));
}
},
});
}
function registSchedule() {
// 開始終了日付の調整
var startYmd = moment(formatNengappi($('#inputYmdFrom').val() + "00時00分00", 1));
var endYmd = moment(formatNengappi($('#inputYmdTo').val() + "00時00分00", 1));
var allDayCheck = $('#allDayCheck').prop("checked");
if (!allDayCheck) {
startYmd = moment(formatNengappi($('#inputYmdHmFrom').val() + "00", 1));
endYmd = moment(formatNengappi($('#inputYmdHmTo').val() + "00", 1));
}
if (endYmd.diff(startYmd, 'days') > 0) {
endYmd = endYmd.add(+1, "days");
}
// 非同期でサーバーにリクエストを送信
var EventData = {
id: $("#scheduleId").val(),
title: $('#inputTitle').val(),
// title: event.title,
start: startYmd.format("YYYY-MM-DDTHH:mm:ss"),
end: endYmd.format("YYYY-MM-DDTHH:mm:ss"),
allDay: allDayCheck,
};
alert("3!");
sendAjaxRequest("add_event", EventData);
}
function sendAjaxRequest(method, EventData) {
var cal = $("#calendar").fullCalendar("getView");
EventData.searchStart = cal.start;
EventData.searchEnd = cal.end;
// 処理名を設定
var methodName = "登録";
if (method == "update") {
methodName = "更新"
} else if (method == "remove") {
methodName = "削除"
}
$.ajax({
url: "/fullcalendar/" + method,
type: "GET",
//JSON data -> string
// data: JSON.stringify(EventData),
// data: {'title': title, 'start': start, 'end': end},
dataType: "json",
success: function() {
// カレンダー再描画
$('#calendar').fullCalendar('refetchEvents');
$('#inputScheduleForm').modal('hide');
alert("予定を" + methodName + "しました。");
},
error: function() {
alert("予定の" + methodName + "に失敗しました。");
}
});
$('#calendar').fullCalendar('unselect');
}
function allDayCheckClick(element) {
if (element && element.checked) {
// 日付に変換して設定
var startYmdHm = formatNengappi($("#inputYmdHmFrom").val() + "00", 1);
var endYmdHm = formatNengappi($("#inputYmdHmTo").val() + "00", 1);
var startYmd = moment(startYmdHm);
var endYmd = moment(endYmdHm);
$("#inputYmdFrom").val(startYmd.format("YYYY年MM月DD日"));
$("#inputYmdTo").val(endYmd.format("YYYY年MM月DD日"));
// 表示切替
$('.ymdHm').hide();
$('.ymd').show();
} else {
// 日時に変換して設定
var startYmd = formatNengappi($("#inputYmdFrom").val(), 0);
var endYmd = formatNengappi($("#inputYmdTo").val(), 0);
var startYmdHm = moment(startYmd + "T" + moment().format("HH") + ":00:00");
var endYmdHm = moment(startYmd + "T" + moment().format("HH") + ":00:00").add(1, "hours");
$("#inputYmdHmFrom").val(startYmdHm.format("YYYY年MM月DD日 HH時mm分"));
$("#inputYmdHmTo").val(endYmdHm.format("YYYY年MM月DD日 HH時mm分"));
// 表示切替
$('.ymdHm').show();
$('.ymd').hide();
}
}
function formatNengappi(nengappi, flg) {
var ret = nengappi.replace("年", "-").replace("月", "-").replace("日", "");
if (flg == 1){
ret = nengappi.replace("年", "-").replace("月", "-").replace("日", "T").replace("時",":").replace("分",":").replace(" ","");
}
return ret;
}

views.py

def add_event(request):
title = request.GET.get("title", None)
start = request.GET.get("start", None)
end = request.GET.get("end", None)
event = Events(title=str(title), start=start, end=end)
event = Events.objects.create(
title = title,
start = start,
end = end,
)
event.save()
data = {}
return JsonResponse(data)

Answer 1

$.ajax({
url: "/fullcalendar/" + method,
type: "GET",
data: {'title': EventData.title, 'start': EventData.start, 'end': EventData.end},
success: function() {
// カレンダー再描画
$('#calendar').fullCalendar('refetchEvents');
$('#inputScheduleForm').modal('hide');
alert("予定を" + methodName + "しました。");
},
error: function() {
alert("予定の" + methodName + "に失敗しました。");
}
});
$('#calendar').fullCalendar('unselect');
}