时间戳

首页 > 解决方案 > 如何在下一页开始加载之前激活 JavaScript？

javascript - 如何在下一页开始加载之前激活 JavaScript？

问题描述

我想制作一个在有人提交 Django 表单时出现的加载屏幕。这是一些示例代码：

表格.py

class ExampleForm(forms.Form):
    example_field = forms.CharField(
        widget=forms.TextInput(attrs={'class': 'form-control'})
    )

索引.html

<style>
    .overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.8);
        z-index: 5000;
        text-align: center;
        padding-top: 20%;
    }
</style>
<form action="example_form">
    {% for each in example_form %}
        {{ each.label_tag }}
        {{ each  }}
    {% endif %}
    <button type="submit" class="btn btn-primary" name="action" value="submit">submit</button>
</form>
<script>
    $(document).ready(function () {
        function ShowLoading() {
            $(".overlay").show();
        }

        $("button[type='submit']").on("click", ShowLoading)
      })
</script>

当单击提交按钮和加载下一页之前，此代码成功显示加载屏幕。但是，当您没有在其单个必填字段中输入任何内容但仍然单击提交时，就会出现问题。发生的情况是会出现一个告诉用户输入输入的工具提示，但加载屏幕无论如何都会出现，即使它实际上并没有加载另一个页面。这是因为它通过单击激活，而不是下一页是否开始加载。

我想要的不是在单击按钮时激活 JavaScript，而是希望它在下一页加载时但在下一页实际开始出现之前激活。JavaScript 有没有办法感知这种事情？

标签： javascriptdjangodjango-forms

解决方案

代替

$("button[type='submit']").on("click", ShowLoading)

和

$("form").on("submit",ShowLoading);

推荐阅读