Javascript 更新进度条而不刷新页面_Javascript_Php_Html_Jquery_Ajax

Javascript 更新进度条而不刷新页面

javascript php html jquery ajax

Javascript 更新进度条而不刷新页面,javascript,php,html,jquery,ajax,Javascript,Php,Html,Jquery,Ajax,我有两个php页面。page.php和loader.php。Loader.php从mysql提取数据以填充进度条，page.php包含每秒刷新Loader.php的函数。它可以工作，但它相当丑陋，因为你可以看到css动画每秒重置我更喜欢在page.php中使用加载条html以及页面的所有其他html，但是A）如何将vars从loader.php获取到page.php，以及B）如何在不刷新页面的情况下更新page.php上的div（或任何对象）我研究了AJAX，它似乎可以做我想做的事情，但我对

我有两个php页面。page.php和loader.php。Loader.php从mysql提取数据以填充进度条，page.php包含每秒刷新Loader.php的函数。它可以工作，但它相当丑陋，因为你可以看到css动画每秒重置

我更喜欢在page.php中使用加载条html以及页面的所有其他html，但是A）如何将vars从loader.php获取到page.php，以及B）如何在不刷新页面的情况下更新page.php上的div（或任何对象）

我研究了AJAX，它似乎可以做我想做的事情，但我对AJAX和编程基本上是新手。我已经为它（在某种程度上）开始起作用而感到自豪

page.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>


var myTimer=null；
//执行用数据填充mysql的脚本
函数fileExec（）{
$.ajax({
url:“fileexec.php”，
类型：“职位”
});
startRefresh（）；
}
//显示进度条
函数refreshData（）{
$（'#container'）.load（'loader.php'）；
}
函数stopfresh（）{
清除间隔（myTimer）；
}
函数startRefresh（）{
myTimer=setInterval（刷新数据，1000）；
}

loader.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>


//使用变量更新进度条
使用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);
}

只需返回php中的值，而不是HTML中的值。然后执行类似于function refreshData（）{$.post（“loader.php”，function（data）{$（'#myBar'）.width（data）；}）
如何指定哪些变量要从loader.php中检索？我有多个变量。我假设代码的后面部分使用新值更新div。我必须声明$progress为全局变量，并且只使用echo globalvar和@mplungjan代码来更新div以使其工作。除了echo之外，还有其他操作吗？我尝试添加了条件to trigger stopRefresh（），但这不起作用。如果进度或脚本与同一块ajax中的某个值相匹配，是否有任何方法可以触发page.php上的函数？是的，如上所示：js中的函数：“getProgress”和开关（$_POST['function']）{case'getProgress'：getProgress（）；break；}在phpy中，您的意思是在getProgress（）下面添加另一个函数；因此，在“getProgress”的情况下：getProgress；getSomeOtherFunction；break；？哦，对不起，我没有正确地阅读您的问题。是的，只需检查值并在getProgress（）内添加另一个函数调用，就像在普通PHP中一样。