Django中提交Bootstrap模态框表单时如何将数据保存到数据库

当前表单默认走同步提交逻辑，没有通过Ajax提交，且后端视图未适配Ajax请求，导致点击提交按钮后直接跳转页面出现错误，按以下步骤调整即可：

1. 调整JavaScript逻辑（main.js） #

增加表单提交事件监听，阻止默认跳转行为，改用Ajax提交表单数据：

var modalDiv = $("#modal-div");

// 打开模态框逻辑
$(".open-modal").on("click", function () {
    const formUrl = $(this).attr("data-url");
    $.ajax({
        type: 'GET',
        url: formUrl,
        success: function (data) {
            modalDiv.html(data);
            // 给表单设置提交地址
            $("#grade-form").attr("action", formUrl);
            $("#exampleModalCenter").modal();
        }
    });
});

// 监听表单提交事件（事件委托适配动态加载的模态框）
$(document).on("submit", "#grade-form", function(e) {
    e.preventDefault(); // 阻止默认同步提交跳转
    const _this = $(this);
    $.ajax({
        type: 'POST',
        url: _this.attr("action"),
        data: _this.serialize(),
        success: function(res) {
            if (res.code === 0) {
                // 提交成功：关闭模态框、刷新页面/局部更新成绩数据
                $("#exampleModalCenter").modal('hide');
                location.reload(); // 不需要全页刷新可自行替换为局部DOM更新逻辑
            } else {
                // 提交失败：可自行替换为用户可见的弹窗提示
                console.log(res.msg);
            }
        },
        error: function(err) {
            console.log("提交失败", err);
        }
    })
})

2. 调整后端视图（views.py） #

适配Ajax请求，提交成功/失败均返回JSON格式响应：

from django.http import JsonResponse

class GradeUpdateView(LoginRequiredMixin, UpdateView):
    model = Subject
    template_name = 'teacher/modal.html'
    form_class = UpdateGradeForm

    def get_success_url(self):
        subject = self.object.subject_name
        year = self.object.year_taken
        return reverse_lazy('student-list', kwargs={"subject_name_id": subject.id, "year_taken": year})
    
    def form_valid(self, form):
        # 判断是否为Ajax请求
        if self.request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
            self.object = form.save()
            return JsonResponse({"code": 0, "msg": "保存成功"})
        # 非Ajax请求走原有逻辑
        return super().form_valid(form)
    
    def form_invalid(self, form):
        # 判断是否为Ajax请求
        if self.request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
            return JsonResponse({"code": 1, "msg": form.errors})
        # 非Ajax请求走原有逻辑
        return super().form_invalid(form)

3. 校验检查 #

确认「添加成绩」按钮已经正确设置了data-url属性为GradeUpdateView对应的路由地址，路由配置、UpdateGradeForm字段校验规则无异常即可正常运行。

内容的提问来源于stack exchange，提问作者Jack Junior