Django表单重复提交时显示加载屏幕的实现方案问询

1. 修复视图代码 #

原视图存在两处问题：POST分支未传递表单实例到模板，最后一行上下文格式错误。修正后确保表单和必要数据始终传入模板：

def my_view(request):
    my_form = MyForm(request.POST) if request.method == "POST" else MyForm()
    context = {"form": my_form}  # 表单始终传入模板

    if request.method == "POST" and my_form.is_valid():
        # 执行你的计算逻辑
        calculations_results = []  # 替换为实际计算结果
        context["calculations_results"] = calculations_results
    else:
        context["welcome_message"] = "Hello"

    return render(request, 'myapp/my_template.html', context)

2. 调整模板结构 #

将加载屏幕统一放在main-div内，初始状态隐藏，同时简化分支逻辑：

<div class="main-div">
    {% if welcome_message %}
    <div class="welcome-mess-div-2">
        <h1 class="white-text">Hello!</h1>
        <br>
        <br>
        <h5 class="white-text">Welcome to my website, nice to meet you!</h5>
    </div>
    {% else %}
    <div class="results">
        {% for result in calculations_results %}
            <p>{{result}}</p>
        {% endfor %}
    </div>
    {% endif %}
    <!-- 全局加载屏幕，默认隐藏 -->
    <div class="loading-screen" style="display: none;">
        <h1>Loading...</h1>
    </div>
</div>

<div class="form-div">
<form id="my-form" method="post" enctype="multipart/form-data" onsubmit="displayLoadingScreen()">
    {% csrf_token %}
    {{form.input}}
    <button type="submit">提交</button>
</form>
</div>

3. 更新JavaScript函数 #

修改函数以处理两种场景：首次提交隐藏欢迎消息，再次提交隐藏旧结果，统一显示加载屏幕：

function displayLoadingScreen() {
    // 隐藏欢迎消息（若存在）
    const welcomeEl = document.querySelector('.welcome-mess-div-2');
    if (welcomeEl) welcomeEl.style.display = 'none';
    
    // 隐藏旧计算结果（若存在）
    const resultsEl = document.querySelector('.results');
    if (resultsEl) resultsEl.style.display = 'none';
    
    // 显示加载屏幕
    const loadingEl = document.querySelector('.loading-screen');
    if (loadingEl) loadingEl.style.display = 'flex';
}

关于模板的说明 #

完全不需要新增模板，基于现有单模板即可实现需求。核心思路是让加载屏幕成为全局DOM元素，通过JavaScript动态切换不同状态的显示/隐藏，无论首次访问还是再次提交都能正确触发加载状态。

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