当表单提交和刷新我的加载屏幕的页面再次出现时？

Posted 2023-05-09

【中文标题】当表单提交和刷新我的加载屏幕的页面再次出现时？

【英文标题】：When form submitting and the page refreshing my loading screen comes in agin?

【发布时间】：2021-11-29 12:00:21

【问题描述】：

我正在尝试创建一个登录页面。我制作了一个在页面加载时会消失的加载屏幕。

        $(window).on("load",function()
            setTimeout(function()  
                $(".loading").fadeOut("slow", function()
                    $(".container").fadeIn("slow").css("display", "flex");
                );     
            , 500);
        );

当您提交表单并且页面刷新时出现问题，因为此时加载屏幕再次出现。有什么解决办法吗？

【参考方案1】：

您可以阻止表单提交

$("#prospects_form").submit(function(e) 
e.preventDefault();
)

没有 jQuery：

var form = document.getElementById("myForm");
function handleForm(event)  event.preventDefault();  
form.addEventListener('submit', handleForm);

【讨论】：

如果我使用 preventDefault 如何在 php 中检查登录？

您必须使用 jQuery、fetch、XMLHttpRequest 等工具自己发送带有数据的 http 请求。如果您不阻止表单提交的默认行为，您将无法阻止页面的新加载

【参考方案2】：

1- 您可以使用 Ajax 将表单发送到服务器。

2- 或者做这样的事情：

// add an item to session before form submitting.
$(document).on('submit', function (e) 
    e.preventDefault()
    sessionStorage.setItem('notLoad', '1')
    $('form').submit() // add any attr to form idetifier.
)

$(window).on('load', function () 
    // check the session to know if the page loaded from form submitting or not:
    if (sessionStorage.getItem('notLoad') !== '1') 
        sessionStorage.removeItem('notLoad');
        setTimeout(function () 
            $('.loading').fadeOut('slow', function () 
                $('.container').fadeIn('slow').css('display', 'flex')
            )
        , 500)
    
)