CGI(Perl)表单提交后显示进度条及加载器时机问题求助

你的问题本质是服务器端先完成所有耗时操作才输出完整HTML，导致浏览器要等全部内容接收完才开始渲染，加载器自然只会在最后出现。要解决这个问题，关键是先把加载器的内容发送给浏览器并让它立即渲染，再执行耗时任务，具体步骤如下：

一、核心修改思路：分阶段输出HTML并刷新缓存 #

Perl CGI默认会缓存输出内容，直到脚本执行完毕才一次性发送给浏览器。我们需要手动刷新输出缓存，让浏览器先拿到加载器的代码并显示出来，再处理耗时的数据库查询。

二、修改后的Perl CGI代码 #

# 先输出HTTP头，添加缓存控制确保浏览器不缓存
print "Content-type:text/html\n";
print "Cache-Control: no-cache\n";
print "Connection: close\n\n";

# 先输出加载器的HTML、CSS和基础结构
print <<'LOADER_HTML';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Loading Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        #loading{
            width:100%;
            height:100%;
            position:fixed;
            z-index:9999;
            background:url("http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif") no-repeat center center rgba(0,0,0,0.25);
        }
        /* 可选：添加模拟进度条样式 */
        #progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background-color: #007bff;
            z-index: 10000;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <div id="loading"></div>
    <div id="progress-bar"></div>
LOADER_HTML

# 开启Perl自动刷新，让浏览器立即渲染加载器
$| = 1;
print "\n";

# 模拟耗时的数据库查询（实际替换成你的DB操作）
sleep(5);

# 输出页面主体内容，同时隐藏加载器
print <<'MAIN_CONTENT';
    <div class="container">
        <h1 align="center"> Webpage loading is done ! </h1>
    </div>
    <script>
        // 隐藏加载器
        document.getElementById('loading').style.visibility = "hidden";
        // 进度条拉满后隐藏
        document.getElementById('progress-bar').style.width = "100%";
        setTimeout(() => {
            document.getElementById('progress-bar').style.display = "none";
        }, 500);
    </script>
</body>
</html>
MAIN_CONTENT

三、针对表单提交的优化 #

如果是表单提交后触发这个页面，分两种场景处理：

同步表单提交（页面跳转） #

在表单页面添加提交时的临时加载器，避免跳转间隙无提示：

<form action="your_cgi_script.pl" method="post" onsubmit="showTempLoader()">
    <!-- 表单内容 -->
    <button type="submit">提交</button>
</form>
<script>
    function showTempLoader() {
        const loader = document.createElement('div');
        loader.id = 'temp-loader';
        loader.style.cssText = 'width:100%;height:100%;position:fixed;z-index:9999;background:url("http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif") no-repeat center center rgba(0,0,0,0.25);';
        document.body.appendChild(loader);
    }
</script>

异步表单提交（无刷新体验） #

用AJAX提交表单，全程控制加载器显示：

<form id="myForm">
    <!-- 表单内容 -->
    <button type="submit">提交</button>
</form>
<script>
    document.getElementById('myForm').addEventListener('submit', function(e) {
        e.preventDefault();
        // 显示加载器
        document.getElementById('loading').style.visibility = "visible";
        // 提交表单数据
        fetch('your_cgi_script.pl', {
            method: 'POST',
            body: new FormData(this)
        }).then(response => response.text())
          .then(html => {
              // 隐藏加载器并替换页面内容
              document.getElementById('loading').style.visibility = "hidden";
              document.body.innerHTML = html;
          });
    });
</script>

四、关于进度条的说明 #

如果需要真实进度反馈（而非动画），需要服务器端实时返回进度数据，实现起来更复杂：

• 可以把耗时任务拆分成多个步骤，每完成一步就向浏览器输出一段JS更新进度条
• 或者用WebSocket实现实时通信，但Perl CGI场景下更适合搭配后端框架完成

如果只是需要视觉上的进度效果，上面代码中的#progress-bar配合CSS动画就足够满足需求。

内容的提问来源于stack exchange，提问作者Surajit Mitra