jQuery SetInterval更新PDO内容

我想运行一个经常更新内容框的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>

我的问题是，我将如何做到这一点？谢谢

您需要执行呼叫PHP服务器端操作的AJAX函数（使用<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>

如我的评论中所述：

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>

尝试此

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

相关内容

最新更新

热门标签：