如何将信息从 node.js 传递到 html

Posted

技术标签:

【中文标题】如何将信息从 node.js 传递到 html【英文标题】:How to pass information from node.js to html 【发布时间】:2019-10-05 06:17:05 【问题描述】:

我正在用 html 构建一个网站,并且我还运行了一个 node.js 进程,它将从名为 better-sqlite3 的 npm 包中获取数据。我想获取这些数据,并将其显示在我的网站上。

我不确定如何推送数据。我知道如何通过http 模块启动服务器,但我不知道如何使其将数据推送到站点。 我想要这个数据-

name: 'xxxxxx', value: '15324 points (level 24)' name: 'yyyyyy', value: '9643 points (level 19)'

显示在网站上,希望适合我的设计。

大家可以给我任何提示吗?提前谢谢。

【问题讨论】:

所以 npm 包只返回 javascript 对象?如果您想展示这些内容,请查看如何在 js 中使用 js 对象以及如何将 js 字符串插入到 html 中。这是JS的基础 通常客户端(浏览器)向服务器上的 REST API 发出请求。如果你想在没有客户端请求的情况下从服务器推送数据,你可能需要使用 WebSockets。 @Robbeoli,没有。它是一个数据库。它返回多个不同的项目,这正是我需要显示的。 您可以在您的网站中使用模板引擎,例如 ejs。如果您想了解更多信息,请告诉我。 【参考方案1】:

您不能直接在 HTML 中执行此操作(它主要用于网页布局),您还需要一些客户端 Javascript 来连接到用 NodeJs 编写的服务器。通信是通过http协议完成的。服务器公开一个 RestApi 并将您指定的对象返回给呈现它的浏览器。

【讨论】:

【参考方案2】:

我猜你想使用 AJAX 来获取你需要的所有数据。这是你的服务器。 (我使用的是 express,但没有它你也可以这样做)

var express = require("express");
var app = express();

//Just a setting for enable CORS (Cross-origin resource sharing )
app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
);

//creating your object
var obj =  
    name: 'xxxxxx', 
    value: '15324 points (level 24)'


//sending your object
app.get("/obj", function(req, res)
    res.json(obj);
);

app.listen("3002", function()
    console.log("Server is Running");
);

这是带有 AJAX 请求的 HTML 文件:

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="objPanel"></div>
        <script type="text/javascript">
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() 
            if (this.readyState == 4 && this.status == 200) 
              document.getElementById("objPanel").innerHTML = this.responseText;
            
          ;
          xhttp.open("GET", "http://localhost:3002/obj", true);
          xhttp.send();
        </script>

    </body>
    </html>

【讨论】:

所有返回的是 - Cannot GET / 你能把你的服务器和ajax代码发给我吗?如果您想将我添加到不和谐中,我可以向您展示我的代码正在运行并为您提供更好的帮助。 我的 Discord 是 GeminiJupiter#1560。我希望得到一些帮助! 当然,我加了你!这是“安德森·洛伊罗#3030”

以上是关于如何将信息从 node.js 传递到 html的主要内容,如果未能解决你的问题,请参考以下文章

如何将 node.js 变量传递/访问到 html 文件/模板

如何通过使用 node.js 和 express 的 onclick 将数据从一个页面传递到另一个页面?

Node.js如何将数组索引传递给异步函数

如何将数据从角度发送到node.js

将变量从 node.js 传递到 html

将消息从 Node.js 传递到外部系统?