jquery가있는 데이터베이스의 최신 행만 표시합니다.

Question

아약스가있는 데이터베이스에서 새 행을 검색하려고했습니다. 페이스 북 채팅에서 일어나는 일과 같은 것입니다. 내가 해왔 던 것은 매 2 초마다 ajax가있는 데이터베이스에서 마지막 열 10 개를 가져와 사용자가 보지 못했던 것을 표시하려고 시도하는 것입니다. ID와 이름의 두 개의 열이 있습니다. 나는 순서가없는 목록을 만들고 각 li 요소 id를 데이터베이스의 id로 설정했습니다. 각각의 li는 한 행에 대한 것입니다. 마지막으로 li 요소의 id를 얻고 ID와 이름이 포함 된 새 li를 추가하면 데이터베이스의 id가 더 큰지 확인합니다. 하지만 몇 가지 이유로 2 초마다 전체 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); 

당신이 데이터를 가져 오는하는 문제를 가지고가는 경우에 나는 dB

$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 

당신이 가지고있는 lastId 선택 코드와

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

에 항상 항상 제외 true가됩니다 만 첫 번째의 ID와 비교 id > lastId를 가져옵니다 최초의 요소의 ID. 따라서 레코드가 이미 추가 된 경우에도 결국 추가됩니다.

하지만 데이터를 표시하려면 서버에서이 논리를 수행하는 것이 가장 이상적입니다. 당신이 매우 간단 데이터베이스에서 마지막으로 결과를 정렬 할 경우

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>