当 php shell_exec 在后台运行时显示加载栏或 gif

Question

我有这个 php 页面，它运行脚本。用户从索引页面单击一个按钮，此页面在 10 秒左右后显示最终结果。我想在用户等待时显示进度条。这是实际页面：

<!DOCTYPE html>
<html>
<head>
  <title>METAR LIRN</title>
  <style>
    h1 {
      text-align: center;
    }
    .table {
      display: table;
      margin-top: 30px;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid #808080;
      padding-left: 30px;
      padding-right: 30px;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
    <div class="table">
    <div>
    <h1>METAR LIRN<h1>
    </div>
    <div>
           <?php
                $output = shell_exec('sh /var/www/html/weather.sh');
                echo "<pre>$output</pre>";
            ?>
    </div>
</body>
</html>

我看了其他类似的帖子，但没有运气...... 提前致谢！

Answer 1

当然，这是一个简单的例子：

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* Just some styles for the bar */
        .loading-bar {
            background: blue;
            width: 300px;
            height: 20px;
            display: none;
        }
            .loading-bar.active {
                display: block;
            }
    </style>
</head>
<body>
    <button class="myBtn">Execute code!</button>
    <div class="response"></div>
    <div class="loading-bar"></div>

    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
    <script>
        // Handle button click
        $('.myBtn').on('click', function(){
            $('input').val( "" );

            // Inmediatly show your bar
            var $loadingBar = $('.loading-bar');
            $loadingBar.addClass('active');

            // Then execute Ajax
            $.ajax({
                url: "test.php",
                method: 'GET'
            })
            .done(function(data) {
                // Display response data
                $('div.response').html(data);
            })
            .fail(function(error) {
                // Display error if fails
                $('div.response').html(error);
            })
            .always(function() {
                // Always hide loading bar when finish
                $loadingBar.removeClass('active');
            });
        });
    </script>
</body>
</html>

test.php:

<?php
sleep(2);
echo 'OK';

当 php shell_exec 在后台运行时显示加载栏或 gif

Show loading bar or gif while a php shell_exec runs in background

php

jquery

loading

gif

shell-exec