如何在Django中为一个需要花时间处理的表单设置一个加载屏幕?

2fjabf4q  于 2022-12-24  发布在  Go
关注(0)|答案(1)|浏览(119)

我有以下视图(为简单起见,删除了一些代码):

def add_entry(request, num):
    form = ModelForm1()
    form2 = Form2()
    if request.method == 'POST':
        form = ModelForm1(request.POST)
        form2 = Form2(request.POST)
        if form.is_valid() and form2.is_valid():
            text = form2.cleaned_data['text']
            database_dict = process_data(text)
            # Some code here that dictates how data is saved from the dictionary....
            entry.save()
            return redirect('entries', num)
    return render(request, 'app/add_entry.html', {"form": form, "form2": form2})

基本上,这个视图包含一个接受文本输入的表单。该文本输入通过一个函数进行处理,该函数返回一个字典值。然后这些值被存储在一个数据库中,该数据库被呈现为模板"entries.html"。
根据表单中的文本量,处理表单可能需要相当长的时间,而这段时间花在了表单的输入屏幕上。我想添加一个临时的"加载"屏幕,用户在处理表单时会进入该屏幕,然后在处理完成后重定向到entires.html。但我似乎找不到方法,在数据处理之后添加一个没有"return"语句的重定向似乎没有任何作用,而添加"return"语句则会把一切都搞砸。
我该怎么做呢?

ttvkxqim

ttvkxqim1#

下面是一个使用Bootstrap 5加载程序的方法,遵循Luiz在注解中推荐的方法。将以下所有代码添加到Add_entry. html
步骤1:添加包含加载器的html元素
确保style ="显示:无;"

<div id="loadingModal" style="display: none;">
    <button class="btn btn-primary" type="button" disabled>
      <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
      Loading...
    </button>
</div>

第二步:添加js函数,在表单提交时显示加载器

<script>

function openLoader() {
    document.getElementById("loadingModal").style.display = "block";
  }

</script>

步骤3:将js函数赋给表单元素onsubmit = in

<form method="POST" onsubmit="openLoader()">
    {% csrf_token %}
    ...form contents here...
</form>

当表单成功提交时,加载模态将出现,然后当重定向如您所述启动时消失。

相关问题