使用 jquery 仅显示数据库中的最新行答案

【问题标题】：show only latest rows from a database with jquery使用 jquery 仅显示数据库中的最新行
【发布时间】：2013-09-27 19:23:10
【问题描述】：

我一直在尝试使用 ajax 从数据库中检索新行。就像在 facebook 聊天中发生的事情一样。我一直在做的是每两秒使用 ajax 从数据库中获取最后十行，并尝试显示用户没有看到的行。我有两列，id 和 name。我创建了一个有序列表并将每个 li 元素 id 设置为数据库中的 id。每个 li 代表一行。然后我尝试获取最后一个 li 元素的 id 并检查数据库中的 id 是否更大，如果是则附加一个包含 id 和名称的新 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 );

【问题讨论】：

你没有考虑过简单地从最后一个id运行sql查询吗？
你为什么不在查询中使用LIMIT？您现在的方式将在每次 ajax 调用时从数据库中获取所有记录，这是一个性能问题..
我正在尝试编写一个聊天应用程序，因此无法返回特定行数的最后一行

标签： php jquery mysql ajax chat

【解决方案1】：

如果您解决了获取数据的问题，那么您遇到的另一个问题是您的 javascript 代码。

改变

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，并且您的比较id > lastId 将始终为真，除了第一个元素的ID。因此，即使之前已经添加了该记录，您最终也会追加。

但理想情况下，您应该在服务器上执行此逻辑以仅获取要呈现的数据。

【讨论】：

【解决方案2】：

如果你想对数据库中的最后一个结果进行排序，这很简单，你可以在你的 sql 中试试这个代码：$result = mysql_query("SELECT * FROM $tableName ORDER BY id DESC");

【讨论】：

【解决方案3】：

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

该行将始终查找列表中的 first 元素，而您可能正在查找最后一个元素。尝试将行替换为：

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

【讨论】：

【解决方案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>

【讨论】：

我试过你的代码，它返回'id: undefined name: undefined'
rows 需要是具有 id 和 name 字段的对象数组。服务器端代码需要在制作 JSON 字符串之前制作这样的对象。您可能需要使用 JSON.parse(rows).forEach(function(row){ // do stuff });如果 ajax 请求没有自动将其转换为 JSON 对象。