Django Modal Ajax用户注册点击保存直接关闭、无法验证存储问题

核心问题定位 #

当前视图逻辑和AJAX模态框的交互逻辑不匹配，导致提交后没有预期响应：

• 表单验证通过后直接返回302重定向响应，不符合前后端约定的JSON返回格式，前端无法识别处理
• 直接使用Django的messages框架传递成功提示，AJAX场景下没有页面刷新，提示无法渲染到前端
• 前端提交逻辑大概率没有做分支判断，不管后端返回结果直接关闭模态框

修复步骤 #

1. 调整后端视图代码 #

修复返回逻辑，统一返回JSON格式数据，补全缺失导入：

from django.shortcuts import reverse  # 如使用命名路由跳转建议导入reverse，硬编码url可省略
from django.template.loader import render_to_string
from django.http import JsonResponse
from authentication.forms import CustomUserCreationForm

def CreateUser(request):
    data = dict()
    if request.method == "POST":
        form = CustomUserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            data["form_is_valid"] = True
            username = form.cleaned_data.get('username')
            # 成功提示和跳转地址都放入JSON返回，由前端处理
            data["success_msg"] = f'您的账户 {username} 已创建成功，现在可以登录'
            data["redirect_url"] = "/home/manage-users.html"  # 用命名路由的话改为reverse('你的路由名')更规范
        else:
            data["form_is_valid"] = False
    else:
        form = CustomUserCreationForm()
    
    context = {'form': form}
    data["html_form"] = render_to_string('partial_modal/create-user.html', context, request=request)
    return JsonResponse(data)

2. 调整前端提交逻辑 #

修改表单提交的AJAX回调代码，按返回结果做分支处理：

• 若form_is_valid为true：展示成功提示后，通过window.location.href跳转到返回的redirect_url
• 若form_is_valid为false：将返回的html_form替换当前模态框内的表单内容，保留模态框展示状态，让用户看到表单错误提示

3. 额外检查项 #

• 确认表单模板partial_modal/create-user.html中已添加表单错误渲染逻辑，示例如下：

  {% if form.non_field_errors %}
  <div class="alert alert-danger">{{ form.non_field_errors }}</div>
  {% endif %}
  {% for field in form %}
  <div class="form-group">
    {{ field.label_tag }}
    {{ field }}
    {% if field.errors %}
    <small class="text-danger">{{ field.errors.0 }}</small>
    {% endif %}
  </div>
  {% endfor %}
  

• 确认前端提交事件中调用了event.preventDefault()，阻止浏览器默认的表单提交跳转行为

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