node.js在POST请求上刷新DOM

时间:2018-07-23 01:07:17

标签: node.js dom http-post

我是node.js的初学者,我试图创建一个简单的本地托管网页,该网页会自动刷新自身(DOM)并显示通过POST / GET请求接收到的信息。我已经搜寻了几个小时,却没有发现任何有效的方法。我什至不确定是否将node.js用于此类内容。

编辑:index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Node.js Receiver</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   </head>
   <body>
      <div id="someEl">some element</div>
   </body>
</html>

server.js

const http = require('http');
const fs = require('fs');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    if (req.method === 'POST') {
        let _html = '';
        req.on('data', chunk => {
            _html += chunk.toString();
        });
        req.on('end', () => {
            console.log(_html);

            res.render('index.html'); // "res.render is not a function"
            res.end(_html); // doesnt update website in browser
            document.body.innerHTML = _html; // error
        });
    }
    else {
        res.statusCode = 200;
        res.setHeader('Content-type', 'text/html');
        res.end('nothing');
    }
});

server.listen(port, hostname, () => {
    console.log('Server started on port ' + port);
});

2 个答案:

答案 0 :(得分:0)

您的问题有点含糊,不包含有关呈现方式和投放方式的任何信息,但是要将请求中的信息返回给浏览器,通常需要从{{1 }}到request。在裸节点中,您可以使用response进行此操作。

不过,我建议单独使用普通节点的req.pipe(res)。我会研究ExpressJS或Hapi或Koa。 Express可能是Node上最受欢迎的Web框架。它将允许您使用http托管静态文件,并使用EJS之类的模板语言将数据从服务器备份到客户端。

答案 1 :(得分:0)

听起来像您想做的事

setInterval(function(){
  XMLHttpRequest()
  .done(function(httpResponse){
    var el = document.querySelector('#someEl');

    el.innerHTML += httpResponse.body.html
  })
}, 3000);

在服务器端,您可以让节点服务器使用ejs或把手来渲染某种模板。我更喜欢ejs(嵌入式javascript),因为我从蠕动的花括号中得到噩梦IRL,这是真的。因此,要安装和保存EJS,您需要执行以下操作:

npm install ejs --save

保存afaik用于将其保存到package.json依赖项列表中。

告诉整个应用程序使用此渲染引擎,如下所示:

app.set('view engine', 'ejs')
app.set('views', path.join(__dirname,'views'))

在发布或获取并想要发送响应之后的任何路由器中,请执行以下操作:

res.render('partials/account', { 
  foo: ser.idu,  
})

ejs之所以有用是因为您可以使用逻辑来创建动态页面,以根据服务器上响应用户请求运行的任何逻辑在服务器上呈现页面。

您在HTML中嵌入了一些逻辑,服务器将呈现它,并将其发送回去。

根据您的情况,使用setInterval可以每隔3000毫秒或所需的毫秒数完成一次。