Question

我正在使用Node.js，Express，Jade和Redis来开发一个应用程序，该应用程序将显示来自reversebeacon.net提供的telnet流的点，这些点与业余无线电俱乐部成员的Redis数据库交叉引用，如果他们匹配显示在我的应用程序的表格上。到目前为止，这一切都非常有效。

不幸的是，我必须刷新整个页面才能在桌面上显示新的位置。我想只刷新包含表（#activeDiv）的div，而不是设置一个刷新整个页面的间隔。

我在网上遇到的大多数例子都是针对PHP的，我试图将它们用于我的应用程序，但到目前为止还不是很成功。

layout.jade

doctype 5
html
  head
    title HAMjitsu | Club Spotter (Flying Pigs, FISTS, SKCC, NAQCC)
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://code.jquery.com/jquery-latest.js')
    script
      // nothing I've placed here has worked :-(
  body
    h1 HAMjitsu
    p Welcome to HAMjitsu, the realtime tool that let's you see who's on the air right now!
    p This application is in the early "alpha" phase of development.  For now, the Flying Pigs will be able to see when their fellow piggies are causing havoc on the bands.  But don't you worry, other clubs will soon be able to use this tool.  
    block content

index.jade

extends layout

block content
  div#activediv
    table
      thead
        tr
          th DE
          th Freq
          th DX
          th NR
          th Mode
          th dB
          th WPM
          th CQ
          th UTC  
      tbody
        each spot, i in spots
          tr
            td: !{spot.de}
            td: !{spot.freq}
            td: !{spot.dx}
            td: !{spot.nr}
            td: !{spot.cw}
            td: !{spot.snr}
            td: !{spot.wpm}
            td: !{spot.cq}
            td: !{spot.utc}

Answer 1

这可以使用load()函数使用jquery和ajax来完成。

<div id="myid"/>

$("#myid").load("a/path")

/ path返回的数据将存储在div中。要获取数据，您每秒轮询服务器或使用websockets并将数据直接从服务器推送到客户端。

Answer 2

通常，您可以通过客户端ajax调用执行此操作，并在dom中更新您的信息。我建议使用jQuery：

<ul id="list"></ul>

$.get('/api/data', function(data){

 var htm = (
  '<li>'+data.foo+'</li>';
 );

 $("#list").append( htm );
});

在Jade模板中自动刷新Div（Node.js / Express）

2 个答案: