不刷新页面更新进度条

Question

I have two php pages.我有两个 php 页面。 page.php and loader.php. page.php 和 loader.php。 Loader.php pulls data from mysql to fill a progress bar and page.php contains a function to refresh loader.php every second. Loader.php 从 mysql 中提取数据以填充进度条，而 page.php 包含一个每秒刷新 loader.php 的函数。 It works but it's rather ugly because you can see the css animation resetting every second.它有效，但它相当丑陋，因为您可以看到每秒重置 css 动画。

I would prefer having the loading bar html in page.php along with all the other html for my page but A) how do I get the vars from loader.php into page.php and B) how do I update the div (or any object) on page.php without refreshing the page?我更喜欢 page.php 中的加载栏 html 以及我的页面的所有其他 html 但是 A) 我如何将 vars 从 loader.php 获取到 page.php 和 B) 我如何更新 div（或任何对象）在 page.php 上而不刷新页面？

I looked into AJAX which seems like it can do what I want but I'm new to AJAX and programming in general.我研究了 AJAX，它似乎可以做我想做的事，但我对 AJAX 和一般编程还不熟悉。 I'm already proud it is (somewhat) working to begin with.我已经为它开始（有点）工作感到自豪。

page.php页面.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>

loader.php加载器.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

Update it using js:使用 js 更新它：

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

And in the php:在 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