使用setTimeout节点jade express动态更新内容

时间:2014-10-25 22:21:58

标签: javascript node.js express pug

你好我是节点的新手,并希望每隔一秒动态更新html内容。我可以通过以下方式更新设置超时的值,但是我必须刷新页面才能看到更改

var jade = require('jade');
var fs = require('fs');
var express = require('express');
var app = express();

function getName(currentName) {
    return currentName + " more hello world ";
}

function updateApp(data) {

    data.name = getName(data.name); // get desired text
    app.get('/', function(req, res){
        res.render("index", {data: data});
    });
    setTimeout(function() {updateApp(data)}, 1000); // schedule values update
}

app.set('views', __dirname+'/views');
app.set('view engine', 'jade');


var startValue = "hello world"
var data = {
    name: startValue
}
//start app
updateApp(data);

app.listen(3000);

其中

html
    head
        script(type='text/javascript').
            var data = !{data};
    body
        h1 
            text= data.name

是我的玉模板。有没有一种简单的方法来更改它,以便在没有页面刷新的情况下显示更新的文本?

1 个答案:

答案 0 :(得分:0)

Click here for my JSFiddle

function loadXMLDoc(url, method, callback) {
    var xmlhttp = window.XMLHttpRequest?xmlhttp=new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4) {
              if(xmlhttp.status==200) {
              callback(xmlhttp.responseText);
              } else callback(false);
          }
      }
    xmlhttp.open(method,url,true);
    xmlhttp.send();
    }

var UpdateAlgo = function() {
    loadXMLDoc("http://ajax-url-here/", "POST",
        function(result) {
            if(result !== false) {
            document.getElementById("myDiv").innerHTML = result;
            }
        AfterUpdate();
        });
    }

var AfterUpdate = function() {
    window.setTimeout(function() {
        UpdateAlgo();
        }, 1000);
    }

AfterUpdate();

我认为你应该能够从中学到一点