不刷新頁面更新進度條

Question

我有兩個 php 頁面。 page.php 和 loader.php。 Loader.php 從 mysql 中提取數據以填充進度條，而 page.php 包含一個每秒刷新 loader.php 的函數。 它有效，但它相當丑陋，因為您可以看到每秒重置 css 動畫。

我更喜歡 page.php 中的加載欄 html 以及我的頁面的所有其他 html 但是 A) 我如何將 vars 從 loader.php 獲取到 page.php 和 B) 我如何更新 div（或任何對象）在 page.php 上而不刷新頁面？

我研究了 AJAX，它似乎可以做我想做的事，但我對 AJAX 和一般編程還不熟悉。 我已經為它開始（有點）工作感到自豪。

頁面.php

<script>
var myTimer = null;

//executes a script that fills mysql with data
function fileExec() {
        $.ajax({
            url:"fileexec.php",
            type: "post"
        });
    startRefresh();
}

//Shows progress bar
function refreshData() {
  $('#container').load('loader.php');
}

function stopRefresh() {
  clearInterval(myTimer);
}

function startRefresh() {
 myTimer = setInterval(refreshData, 1000);
}

</script>

加載器.php

<?php
//Code not shown sets up connection to mysql to pull progress
$progress1 = $row['progress'];
$script1 = $row['script'];

//Stop refresh after shell script has finished
if ($script1 == "stop") {
    echo "<script>";
    echo "stopRefresh();";
    echo "</script>";
}
?>

//Update progress bar with variable
<html>
  <body>
    <div class="progress-bar-wrapper">
        <div class="progress-bar">
            <div id="myBar" class="progress-bar-fill in-progress" style="height:10px;width:<?php echo $progress1; ?>%"></div>
         </div>
    </div>
  </body>
</html>

Answer 1

使用 js 更新它：

$.post("loader.php", {
        function: "getProgress"
        }, function(data) {
            progress = JSON.parse(data);
            //use progress to change your bar with js
        });

在 php 中：

switch ($_POST['function']) {
    case 'getProgress':
        getProgress();
    break;
}
function getProgress() {
    //get the progress state
    echo json_encode($progress);
}

不刷新頁面更新進度條

問題描述

1 個解決方案

解決方案1
1 2020-09-03 08:43:39

不刷新頁面更新進度條

問題描述

1 個解決方案

解決方案1 1 2020-09-03 08:43:39

解決方案1
1 2020-09-03 08:43:39