jQuery setInterval更新PDO內容

Question

我想運行一個jQuery腳本，該腳本經常更新一個內容框。 我希望此框上的內容來自我的數據庫。

到目前為止，我對此並不多，但不確定如何替換內容是最好的方法。 這就是我的方法，但是我確定它是不正確的，並且有更好的方法，但這也不管用。

<div id="list"> List here </div>

<script>
    $(document).ready(function() {
        setInterval(function(){ updateList(); }, 8000);
    });
    function updateList(){

    $('#list').html(
        <?php
            $sql = "SELECT * FROM list WHERE enable = 1 ORDER BY id DESC";
            $stm = $dbh->prepare($sql); 
            $stm->execute();
            $u = $stm->fetchAll();
            foreach ($u as $list) { 
                ?>
                "<?php echo $list['name']; ?>";
                <?php 
            } ?>
        );

    }
</script>

我的問題是，我將如何做到這一點？ 謝謝

Answer 1

您需要執行一個Ajax函數來調用這樣的PHP服務器端操作（使用<ul><li>列表顯示所有分隔的元素，但是可選的）：

list.php

<?php

    function get_list() {
        $sql = "SELECT * FROM list WHERE enable = 1 ORDER BY id DESC";
        $stm = $dbh->prepare($sql);  
        $stm->execute();
        return $stm->fetchAll();
    }

    if($_GET['update']) {
        $html = '<ul>';
        foreach(get_list() as $element) {
            $html. = '<li>'.$element['name'].'</li>';
        }
        echo $html . '</ul>';
        die();
    }

?><html>
    <head>
        <title>...</title>
        Some css and js...
    </head>
    <body>
        <div id="list">

        </div>

        <script>
            $(document).ready(function() {
                setInterval(function(){ 
                    $.get('list.php?update=1', function(data) {
                        $('#list').html(data);
                    });
                }, 8000);
            });
        </script>
    </body>
</html>

Answer 2

如我的評論所述：

PHP只是一個預處理器

因此，我建議使用AJAX和單獨的PHP腳本來完成這項工作（以及<ul> ）：

getEnabledsNames.php

<?php
  $sql = "SELECT * FROM list WHERE enable = 1 ORDER BY id DESC";
  $stm = $dbh->prepare($sql); 
  $stm->execute();
  $u = $stm->fetchAll();
  $u = array_map(function($elem){
    return $elem['name'];
  }, $u);

  header('Content-Type: application/json');
  echo json_encode($u);
?>

JS代碼

let interval;
$(document).ready(()=>{
  interval = setInterval(updateFromDb, 8000);
});

function updateFromDb(){
  $.get(
    "getEnabledsNames.php",
    (data)=>{
      $("#list > ul").html("");
      data.forEach(e=>{
        $("#list > ul").append(`<li>${e}</li>`);
      });
    }
  ).fail(/* function to handle failure here */);
}

HTML

<div id="list">
  <ul></ul>
</div>

Answer 3

嘗試這個

var gtimer;
$(document).ready(function() {
    clearInterval(gtimer);
    gtimer = window.setInterval(function() {
        clearInterval(gtimer);
        updateList();
    },8000);
});

jQuery setInterval更新PDO內容

問題描述

3 個解決方案

解決方案1
0 2017-09-13 07:28:44

解決方案2
0 2017-09-13 17:44:34

解決方案3
-1 2017-09-13 06:47:42

jQuery setInterval更新PDO內容

問題描述

3 個解決方案

解決方案1 0 2017-09-13 07:28:44

解決方案2 0 2017-09-13 17:44:34

解決方案3 -1 2017-09-13 06:47:42

解決方案1
0 2017-09-13 07:28:44

解決方案2
0 2017-09-13 17:44:34

解決方案3
-1 2017-09-13 06:47:42