繁体   English   中英

Jade模板中的自动刷新Div(Node.js / Express)

[英]Auto-Refresh Div in Jade Template (Node.js/Express)

我正在使用Node.js,Express,Jade和Redis开发一个应用程序,该应用程序将显示reversebeacon.net提供的telnet流中的点,这些点将与业余无线电俱乐部成员的Redis数据库进行交叉引用,并且如果它们匹配则显示在我的应用程序的桌子上。 到目前为止,所有这些工作都很棒。

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

我在网络上遇到的大多数示例都是针对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

玉器

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}

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

<div id="myid"/>

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

a / path返回的数据将存储在div中。 要获取数据,请每秒轮询服务器一次,或使用websocket将数据直接从服务器推送到客户端。

通常,您可以通过客户端ajax调用来做到这一点,并在dom中更新您的信息。 我建议使用jQuery:

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

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM