Bootstrap模态框表单填充与提交异常问题求助

1. 视图方法请求方法判断错误 #

你的department_add_view中，request.method == 'post'使用了小写，而Django里request.method的值为大写格式（如'POST'），这会导致POST请求永远无法进入保存逻辑，直接返回初始表单。

修复后的views.py代码：

from django.shortcuts import render
from .models import Region, Department
from .forms import *
from django.contrib.auth.decorators import login_required

@login_required(login_url='login/')
def department_add_view(request, pk):
    answer = 'test'
    template_name = 'add_department.html'
    form_class = DepartmentForm
    form = form_class(request.POST or None, initial={
        "region_id": pk
    })
    data = {
        'form': form,
        'answer': answer,
        'pk': pk
    }
    if request.method == 'POST':  # 改为大写POST
        if form.is_valid():
            form.save()
            data['answer'] = 'Successfully'
    return render(request, template_name, data)

注：原代码中函数定义存在缩进错误，已一并修正。

2. 表单提交路径错误 #

模态框内的表单action=""会默认提交到当前页面URL（比如打开模态框的home/页面），而非department_add/<int:pk>，导致请求无法到达正确的处理视图。

修改add_department.html的表单，指定正确提交路径：

<form action="{% url 'department_add' pk %}" method="post">
    <div class="modal-header">
        <h5 class="modal-title">Add department</h5>
        <button class="btn-close" type="reset" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body" style="text-align: center;">
        <b>Press "save".</b>
        <br>
        <br>
        {% csrf_token %}
        {{ form.as_p }}
        {{ answer }}
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success btn-save"><i class="fa fa-save"></i> Save</button>
        <button type="reset" class="btn btn-secondary btn-cancel" data-bs-dismiss="modal"><i class="fa fa-ban"></i> Cancel</button>
    </div>
</form>

3. 同步提交导致页面重载，需用AJAX处理 #

默认表单提交会触发页面刷新，要实现模态框内无刷新提交，需添加JS拦截提交事件：

更新script.js：

$('#button-department-add').on('show.bs.modal', function (event) {
  let button = $(event.relatedTarget);
  let url = button.data('url');
  let container = $(this).find('.modal-department');
  container.html('');
  $.ajax({
    url: url,
  }).done(function(data){
    container.html(data);
  });
});

// 拦截模态框内的表单提交
$(document).on('submit', '.modal-department form', function(e) {
  e.preventDefault(); // 阻止默认页面刷新
  let $form = $(this);
  let url = $form.attr('action');
  let formData = $form.serialize();

  $.ajax({
    url: url,
    method: 'POST',
    data: formData,
    success: function(response) {
      $('#button-department-add .modal-department').html(response);
      // 提交成功后自动关闭模态框
      setTimeout(() => $('#button-department-add').modal('hide'), 1500);
    },
    error: function(xhr) {
      $('#button-department-add .modal-department').html(xhr.responseText);
    }
  });
});

4. 其他验证细节 #

• 确保表单内{% csrf_token %}存在，AJAX提交时serialize()会自动携带令牌；
• 检查DepartmentForm的region_id字段与模型定义匹配，确保字段类型正确。

完成以上修改后，模态框内的表单即可正常提交保存，且不会触发页面重载。

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