Django表单提交后触发模态框及清空重定向问题咨询

现有问题 #

• 表单提交后没有执行重定向，直接返回了携带用户提交数据的form实例，导致表单无法清空，还会出现刷新页面重复提交的问题
• GET请求时默认传入了successful_submit=True，成功标记的判断逻辑完全失效
• 模态框调用方法可能和MDB组件的依赖不匹配，你使用的是MDB模态框，默认jQuery的.modal('show')写法不一定兼容原生MDB组件

修改方案 #

1. 调整views.py逻辑 #

核心是提交成功后重定向到表单页，用session临时存储提交成功标记，GET请求时返回空表单，同时读取并销毁成功标记：

def add__plan(request):
    if request.method == 'POST':
        form = infoForm(request.POST)
        if form.is_valid():
            form.save()
            _name = form.cleaned_data.get('Name')
            messages.success(request, f'PDF created for {_name}!')
            # 临时存储提交成功标记到session
            request.session['successful_submit'] = True
            # 重定向到表单页，触发GET请求返回空表单
            return redirect('plan:plan')

    # GET请求返回空表单
    else:
        form = infoForm()
    # 读取成功标记，读取后直接从session销毁，避免刷新页面重复触发弹窗
    successful_submit = request.session.pop('successful_submit', False)
    return render(request, 'plan/plan.html', {'form': form, 'successful_submit': successful_submit})

2. 调整模板JS逻辑 #

把模态框触发改成MDB原生写法，不需要依赖jQuery，兼容性更好：

{% if successful_submit %}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    // 原生MDB模态框触发逻辑
    const submitModal = new mdb.Modal(document.getElementById('exampleModal'));
    submitModal.show();
});
</script>
{% endif %}

可选简化方案：你已经引入了Django的messages组件，也可以不用session，直接在模板判断{% if messages %}就触发弹窗，逻辑更简洁。

效果验证 #

• 提交后触发重定向，返回的是空表单实例，所有已填内容自动清空，刷新页面不会重复提交表单
• 只有提交成功后才会携带成功标记，弹窗只会触发一次，刷新页面后标记已销毁，不会重复弹窗

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