從db加載數據live

我想弄清楚如何實時更新ul li列表。從db加載數據live

讓我們說：我們有一個無序的列表，每個li元素都顯示爲最新到最舊。我正在尋找一種方法，輪詢服務器以進行更新，並將該更新推送到列表（推測使用jSon）並且沒有刷新頁面。

例子。

<ul> 
<li>12 seconds ago: Apple</li> 
<li>32 seconds ago: Banana</li> 
<li>42 seconds ago: Grape</li> 
</ul> 

<ul> 
<li>2 seconds ago: Pineapple</li> 
<li>22 seconds ago: Apple</li> 
<li>32 seconds ago: Banana</li> 
<li>52 seconds ago: Grape</li> 
</ul>

所以，如果我們只是盯着頁面，就像一個悲傷的失敗者。該列表每隔x秒自動從服務器上傳最新數據。

我只是想指出一下這種東西需要尋找什麼，真的是我們應該尋找的東西。

不確定從服務器推送數據是否比從服務器提取數據更好，我會想象推動會減少過載。

任何sugegstions將不勝感激。

來源

2012-07-19 422

一個可能的解決方案是使用XMLHttpRequest爲服務器輪詢JSON。您的客戶端JavaScript將如下所示：

setInterval(updateList, 5000); // run updateList() every 5 seconds 

// This assumes you're using jQuery 
// You can still do this without jQuery, it just makes things easier 
function updateList() 
{ 
    $.getJSON('<<URL to your JSON producing script here>>', function(data) { 
     var items = []; 

     $.each(data, function(fruit, time) { 
      items.push('<li>' + time + ' seconds ago: ' + fruit + '</li>'); 
     }); 

     $('#my-list').html(items.join('')); 
    }); 
}

而且你的HTML可能是這樣的：

<ul id='my-list'> 
</ul>

最後，你的JSON應符合下列格式：

{ 
    'Pinapple' : 2, 
    'Apple' : 22, 
    'Banana' : 42, 
    'Grape' : 52, 
}

來源

2012-07-19 02:59:17

謝謝@Thomas Fussell會放棄這一切 – 422 2012-07-19 04:22:50

有實際上是一個SAAS應用程序現在可以簡單快速地完成此操作，因此您不必硬編碼並且可以節省時間： Json Data

來源

2013-01-02 07:36:13

從db加載數據live

回答

相關問題