[英]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.