jQuery setInterval更新PDO內容

我想運行一個jQuery腳本，每隔一段時間更新一次內容框。我希望這個盒子上的內容來自我的數據庫。jQuery setInterval更新PDO內容

到目前爲止，我有這個，這不是很多，但不知道如何最好的方式來取代內容。這就是我的方法，但我相信它是不正確的，還有更好的方法，但這也無濟於事。

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

我的問題是，我將如何能夠做到這一點？由於

來源

2017-09-13 Jack Jacke

PHP只是一個預處理器。在將結果頁面發送給客戶端之前，您的PHP代碼將在服務器上「執行」/解析一次。當你運行你的JS函數時，它不會刷新數據。你可能需要做的是使用[AJAX]（https://en.wikipedia.org/wiki/Ajax_（編程））和一個專門的PHP腳本來完成更新。 – Vivick

@Vivick謝謝你的回覆。如果你可以展示如何通過ajax來做到這一點，是否有可能？ –

-1

嘗試這個

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

來源

2017-09-13 06:47:42

您需要執行調用PHP服務器端操作這樣一個Ajax功能（帶<ul><li>列表中顯示separeted的所有元素，但可選）：

名單。 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>

來源

2017-09-13 07:28:44 Meloman

正如我在評論中指出：

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>

來源

2017-09-13 17:44:34 Vivick

jQuery setInterval更新PDO內容

回答

相關問題