时间戳

首页 > 解决方案 > 在 HTML 表单提交后 PHP 处理期间显示加载器

php - 在 HTML 表单提交后 PHP 处理期间显示加载器

问题描述

我有一个如下所示的 HTML 表单，提交后由 PHP 处理：

<form action="<?php print $_SERVER['PHP_SELF'] ?>" method="POST" enctype="multipart/form-data" id="decisions_form">

    <!-- ... -->

    <div style="text-align:center;">
        <input type="submit" name="submit" value="Submit Decisions" id="decisions_button">
    </div>

</form>

PHP 会进行一些处理，这可能需要几秒钟。处理完成后，我刷新页面如下（可能不是最佳实践，我不知道）：

<?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // PHP...
    }
    echo ('<meta http-equiv="refresh" content="0.1;">');
?>

我想显示一个全屏“加载器/微调器”，它将在提交后和 PHP 处理期间被激活。通常，如果我理解正确，这个加载器/微调器应该被刷新页面命令打断——这就是我想要的

对于像我这样没有经验的人来说，寻找这样的装载机是不成功的，如果不是完全混乱的话。

如果我可以避免使用 JS 并以纯 HTML/CSS 方式来做，那将是理想的（甚至可能吗？）。

标签： phphtml

解决方案

我不知道在纯 HTML 中执行此操作的机制。除了我在下面展示的方法之外，可能还有其他更复杂的方法可以做到这一点，但这对我来说效果很好。每次调用服务器时，ajax start 函数都会执行并延迟 1 秒（根据需要更改延迟），然后显示等待的 gif。当服务器调用完成时调用 ajaxStop 函数并停止等待 gif 并启用按钮。请注意，这应该是您的 html 文件中 css 定义之后的第一个标记。

Javascript代码

<script defer>

$( document ).ready(function() {

    // gif on 1 second timer delay before displaying, so user does not have it appear to quickly if the delay is short.
    var loadingTimer;
    $(document).ajaxStart(function() {
        $(':button').prop('disabled', true); // disable all the buttons
        loadingTimer = setTimeout("$('#process-wait').show()", 1000); // show the waiting gif
    });
    $(document).ajaxStop(function() {
        clearTimeout(loadingTimer);
        $("#process-wait").hide(); // hide the waiting gif
        $(':button').prop('disabled', false); // enable all the buttons
    });
});

</script>

这是您需要配合的CSS。您可以通过调整高度和宽度值使其尽可能大。选择您自己的 gif 图像只需将 url 参数设置为 gif 文件的目录路径和名称。

#process-wait {
background: transparent url(images/process-wait.gif);
background-repeat: no-repeat;
height: 150px;
width: 150px;
z-index: 99999;
display:none;
position: absolute;
top: 50%;
left: 50%;
margin-left: 10px;
margin-top: 0px;
transform: translate(-50%, -50%);

推荐阅读