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>列表来显示所有元素separeted，但是可选）：

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 个答案: