1

Node.js、Express、Jade、および Redis を使用して、reversebeacon.net が提供する telnet ストリームからのスポットを表示するアプリを開発しています。これらのスポットは、アマチュア無線クラブのメンバーの Redis データベースと相互参照され、一致する場合は表示されます。私のアプリのテーブルで。これまでのところ、これはすべて素晴らしく機能しています。

残念ながら、テーブルに新しいスポットを表示するには、ページ全体を更新する必要があります。ページ全体を更新する間隔を設定するのではなく、テーブル (#activeDiv) を含む div のみを更新したいと思います。

私が Web で遭遇したほとんどの例は PHP を対象としており、これらを自分のアプリケーションに適応させようとしましたが、これまでのところあまり成功していません。

レイアウト.ジェイド

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}
4

2 に答える 2

3

これは、 load()関数を使用して jquery と ajax で実行できます。

<div id="myid"/>

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

a/path によって返されるデータは、div 内に格納されます。データを取得するには、毎秒サーバーをポーリングするか、Websockets を使用してサーバーからクライアントにデータを直接プッシュします。

于 2012-11-13T13:28:48.010 に答える
0

通常、これはクライアント側の ajax 呼び出しで行い、dom の情報を更新します。jQuery の使用をお勧めします。

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

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

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

 $("#list").append( htm );
});
于 2012-11-13T06:11:14.790 に答える