показать только последние строки из базы данных с помощью jquery

Question

Я пытаюсь получить новые строки из базы данных с помощью ajax. как то, что происходит в чате facebook. То, что я делал, я получаю последние десять строк из базы данных с помощью ajax каждые две секунды и пытаюсь показать те, которых пользователь не видел. У меня два столбца, id и имя. Я создал упорядоченный список и установил каждый id элементов li в id из базы данных. каждый li для строки. затем я пытаюсь получить идентификатор последнего элемента li и проверить, больше ли идентификатор из базы данных, если он затем добавляет новый li, содержащий идентификатор и имя. но по какой-то причине он просто добавляет целых 10 строк каждые две секунды. что я сделал не так? это код, который я использую.

<ol id="output"><li id="1">test</li></ol> 

<script id="source" language="javascript" type="text/javascript"> 



function reloadw() 
{ 


$.ajax({          
    url: 'api.php',     
    data: "",   
    dataType: 'json',      
    success: function(rows)   
    { 
    for (var i in rows) 
{ 
var row = rows[i]; 
    var lastId = $('ol#output li').attr('id'); 
    var id = row[0]; 
    var vname = row[1]; 



    if(id > lastId){ 
    $('#output').append("<li id="+id+"><b>id: </b>"+id+"<b> name: </b>"+vname+"</li>"); 
    }} 
    } 

}); 
} setInterval(reloadw,2000); 

это то, что я использую в получении данных из БД

$result = mysql_query("SELECT * FROM $tableName ORDER BY id");    
$data = array(); 
for($i=0;$i<=9;$i++){ 
$row = mysql_fetch_row($result); 
$data[] = $row; 
} 
echo json_encode($data); 

Answer 1

Если вы берете вопрос, где вы забирающий данные, еще один вопрос, у вас есть в вашем яваскрипта коде ,

Изменить

var lastId = $('ol#output li').attr('id'); //will always fetch the first li's id 

в

var lastId = $('ol#output li:last').attr('id'); 

С кодом lastId выбора, что у вас есть, он всегда будет получать только идентификатор первого и ваше сравнение id > lastId всегда будет верно, за исключением идентификатор первого элемента. Таким образом, вы заканчиваете добавление, даже если эта запись уже была добавлена ​​раньше.

Но в идеале вы должны сделать эту логику на сервере, чтобы получить только данные, которые будут представлены.

Answer 2

Если вы хотите сортировать последний результат из базы данных это очень просто, вы можете попробовать этот код в SQL: $result = mysql_query("SELECT * FROM $tableName ORDER BY id DESC");

Answer 3

var lastId = $('ol#output li').attr('id'); 

Эта линия всегда будет искать в первый элемент в списке, тогда как вы, вероятно, ищете последнее. Попробуйте заменить линию:

var lastId = $('ol#output li').last().attr('id'); 

Answer 4

Вы можете написать свой код JavaScript следующим образом.

<script> 

     var seen = new Array(); 
     function reloadw(){ 


     $.ajax({          
      url: 'api.php',     
      data: "",   
      dataType: 'json',      
      success: function(rows){ 

      rows.forEach(function(row){ 


       if(seen.indexOf(row.id) == -1){ 

         $('#output').append("<li id="+row.id+"><b>id: </b>"+row.id+"<b> name: </b>"+row.name+"</li>"); 

          seen.push(row.id); 

         } 

}); 

     } setInterval(reloadw,2000); 
    </script>