在 Django 视图中处理表单数据时显示加载屏幕

Question

在 Django 中，我有一个应用程序显示欢迎消息和空表单，然后在提交表单后，它显示处理后的数据而不是欢迎消息，并且在与以前相同的位置显示相同的表单，因此用户可以输入新数据并再次提交。简化的视图代码如下所示：

def my_view(request):
    if request.method == "POST":
        my_form = MyForm(request.POST)
        if my_form.is_valid():
            # Do some calculations
            return render(request, 'myapp/my_template.html', {"calculations_results":calculations_results})
    else:
        my_form = MyForm()
        welcome_message = "Hello"
    return render(request, 'myapp/my_template.html', "welcome_message":welcome_message)

这是 html 代码：

<div class="main-div">
    {% if welcome_message %}
    <div class="welcome-mess-div">
        <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!</h4>
        </div>
        <div class="loading-screen">
            <h1>Loading...</h1>
        </div>
    </div>
    {% else %}
    <div class="results">
        {% for result in calculations_results %}
            <p>{{result}}</p>
        {% endfor %}
    </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>

请注意，由于 if 语句 ({% ifwelcome_message %})，因此可以仅使用一个模板。由于处理表单数据需要一段时间，我想添加一个加载屏幕。我已经设法通过添加一个简单的 JS 函数，在提交表单时从“welcome_message”角度（GET 请求）完成：

function displayLoadingScreen() {
    var welcomeMessage = document.querySelector('.welcome-mess-div-2')
    var loadingScreen = document.querySelector('.loading-screen')

    welcomeMessage.style.display = 'none'
    loadingScreen.style.display = 'flex'
}

但如果我之前已经提交过表单并且我想使用新数据再次执行此操作，我不知道如何实现这一点。现在，我只看到以前的结果，因为我正在等待新的表单数据处理完成，并且我想用加载屏幕替换旧的结果，直到处理新的数据。你能帮我吗？这可以通过一个模板实现吗？还是我应该创建一个新模板？感谢您提前的帮助。

Answer 1

可以尝试在

onsubmit

属性中传递一个方法，该方法将在单击表单提交按钮时调用。 它将使

'loadingForm'

可见并相应地显示在表单上方：

'Loading...'

。

<div id='loadingForm' style='display: none;'>
      Loading...
</div>

<script>
function Load() {
    document.getElementById('loadingForm').style.display = 'block';
  }
</script>


<form method='post' action='' onsubmit='Load()'>
    {% csrf_token %}
    {{ form.as_p }}
    <button type='submit'>add</button>
</form>

您可以在以下行后添加延迟：

if my_form.is_valid()

，看看它是如何工作的。

import time

time.sleep(5)