Индикатор выполнения обновления без обновления страницы

#javascript #php #html #jquery #ajax

#javascript #php #HTML #jquery #ajax

Вопрос:

У меня есть две страницы php. page.php и loader.php . Loader.php извлекает данные из mysql для заполнения индикатора выполнения и page.php содержит функцию для обновления loader.php каждую секунду. Это работает, но довольно уродливо, потому что вы можете видеть, как анимация css сбрасывается каждую секунду.

Я бы предпочел иметь панель загрузки html в page.php вместе со всем другим HTML для моей страницы, но А) как мне получить переменные из loader.php в page.php и Б) как мне обновить div (или любой объект) на page.php без обновления страницы?

Я посмотрел на 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>

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>

1. Просто верните значение в php, а не в HTML. Затем сделайте что-то вроде function refreshData() { $.post("loader.php",function(data) { $('#myBar').width(data); })

2. Как мне указать, из каких переменных извлекать loader.php ? У меня несколько переменных. Я предполагаю, что последняя часть кода обновляет div с новым значением.

Ответ №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. Мне пришлось объявить $ progress как глобальную переменную и использовать только echo globalvar вместе с кодом @mplungjan для обновления div, чтобы заставить его работать. Возможно ли выполнить другое действие, кроме просто echo? Я попытался добавить свое условие для запуска stopRefresh(), но это не сработало. Есть ли какой-либо способ, которым я могу запустить функцию на page.php соответствует ли прогресс или скрипт определенному значению из той же части ajax?

2. Да, как показано выше функцией: «getProgress» в js и переключателем ($_POST[‘function’]) { case ‘getProgress’: getProgress(); break; } в php

3. Вы имеете в виду добавить еще одну функцию ниже getProgress(); поэтому в случае ‘getProgress’: getProgress; getSomeOtherFunction; break;?

4. О, извините, я неправильно прочитал ваш вопрос. Да, просто проверьте значение и добавьте другой вызов функции внутри getProgress(), как в обычном PHP.