如何从另一个 HTML 文件中获取元素答案

【问题标题】：How to get elements from another HTML file如何从另一个 HTML 文件中获取元素
【发布时间】：2017-09-02 16:02:33
【问题描述】：

我正在尝试制作一个node.js 应用程序，该应用程序从 HTML 文件的文本框中获取输入。我想将此值存储在一个数组中，尽管我不确定如何。我的总体目标是制作一个聊天应用程序，并且我认为有一些更简单的方法来获取输入，而无需引用 HTML 文件。

另外，是否有任何用于 html 文件的模板，因为我对 HTML 的熟练程度不足以制作一个看起来不错的网页。所以如果有一些我可以使用的模板，一切都会更好。

我的代码：

var events = require('events');
var express = require('express');
var http = require('http');
var app = express();

var msg = [];

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.read('/', function() {

});

app.listen(3000, function() {
  console.log("Server is running on port " + 3000);
});

#firstHead {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

<header>
  <h1 id='firstHead'>
    This is a header!
  </h1>
</header>
<body>
  <input type="text" id="inText" placeholder="Enter text here" />
</body>

帮助表示赞赏！

【问题讨论】：

标题应该在正文标签内
如果你想创建一个聊天应用程序，有更好的方法去做。查看socket.io 或类似技术。
好的，我就这么做，我只是不确定你是否必须用 HTML 制作一个文本框，谢谢你的帮助！

标签： javascript jquery html node.js get

【解决方案1】：

首先，您的 HTML 代码有很多错误。这是您代码的正确版本（您不会使用它，它只是为了让您了解自己犯了哪些错误）：

<!DOCTYPE html>
<html>
<head>
    <style>
        #firstHead {
            font-family: Georgia, 'Times New Roman', Times, serif;
        }
    </style>
</head>

<body>
    <h1 id='firstHead'>
                	This is a header!
            	</h1>
    <form id="msg" method="GET" action="/msg">
        <input type="text" name="msgContent" id="inText" placeholder="Enter text here" />
        <input type="submit" value="Send">
    </form>
</body>

</html>

现在这个 HTML 页面会将输入内容作为 POST 请求 See here for more details 发送到 localhost:3000/msg，这里的问题是该页面将被刷新或重定向（取决于您的实现，在这种情况下，如果需要，您应该使用 AJAX SPA)。即使您使用 AJAX，您也很难使用 HTTP 请求来实现聊天应用程序。使用 WebSocket 协议来实现此功能会是一个更好的主意。有一个名为 Socket.io 的模块会对您有很大帮助。它有一个事件驱动的系统，非常适合实时应用，你可以查看他们的官方网站；他们有一个用几百行代码编写的聊天应用程序示例。

现在让我们转到您的服务器端代码，首先.. 没有名为 read 的 express 方法，这是您代码的工作版本：

var express = require('express');
var http = require('http');
var app = express();

var msg = [];

app.get('/', function(req, res){
    //You should use some template engines like EJS or Pug to render your HTML page with messages or the user will see nothing
    res.sendFile(__dirname + '/index.html');
});

app.get('/msg', function(){
    msg.push(req.query.msgContent);
    res.redirect("/");
});

app.listen(3000, function(){
    console.log("Server is running on port " + 3000);
});

上面的代码可以正常工作，但是你在客户端看不到任何东西，因为你没有渲染（或者发送 msg 数组到客户端脚本来嵌入它）。我只是想让你明白，而不是让你实现你的想法

我希望这对你有一点帮助。

【讨论】：

这也不对，<html>中没有<header>，应该是<head>！
Ops，我没注意 :p